angular动画新特性

原文地址：点这里

所有的基于angular4.2

1 介绍

翻译略…

1.1 介绍

在package.json中 需要如此导入angular animation包

// package.json
{
  "dependencies": {
    "@angular/animations": "latest",
    "@angular/platform-browser": "latest",
    // the rest of the stuff
  }
}

在代码中 需要导入BrowserAnimationsModule 包 才能开始使用animation

import {NgModule} from "@angular/core";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AppComponent} from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserAnimationsModule]
})
class AppModule {
}

1.2 渐隐渐现动画
我们利用@符号和属性绑定来制作动画效果

<!-- app.component.html -->
<div [@someCoolAnimation]="bindingVar">...</div>

如上例
当bindingVar 改变时，