Angular 4.0中如何实现动画效果的具体案例剖析？

本文共计1264个文字，预计阅读时间需要6分钟。

本文实例讲解了Angular 4.0动画操作。分享给广大开发者及参考，具体如下：

1. 粗略的记录一下Angular 4的动画。

2.先看一眼Angular中文网关于这个的例子。

3.有两个组件：home和about。

4.路径配置是什么的‘

本文实例讲述了Angular4.0动画操作。分享给大家供大家参考，具体如下：

粗略的记录一下angular4的动画

先看一下angular中文网关于这个给的例子。

有两个组件home，about。 路径配置什么的这里就不细说了，之前的博文有说过，我就贴一下代码，很好理解的，

需要import的东西我先说一下，我只贴了使用动画要用的东西，其他的我省略了，

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [ BrowserModule, BrowserAnimationsModule, AppRouting ], ... })

在这个简单的例子里我要对app.component.html里的内容进行animate，所以我的

app.component.ts

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], animations: [] // 这里代码我省略了，先说一下结构，后面说具体实现。 })

以上就是需要写动画实现的基本结构，下面贴实现这个例子的代码。