angular动画新特性

前端之家收集整理的这篇文章主要介绍了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 改变时,

猜你在找的Angularjs相关文章