这篇文章主要为大家展示了“Angular4.0动画操作的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“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: [] // 这里代码我省略了，先说一下结构，后面说具体实现。
})以上就是需要写动画实现的基本结构，下面贴实现这个例子的代码。为了方便阅读，我把代码解释就贴在代码旁边
例一：
这是路由配置：
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from "./home/home.component";
import {AboutComponent} from "./about/about.component";
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, data: { state: 'home' } },
{ path: 'about', component: AboutComponent, data: { state: 'about' } }
];
export const AppRouting = RouterModule.forRoot(routes, {
useHash: true
});app.component.html
Blah blah blah
