z科技

——知科技,了解,拥有,掌控

Angular实例之动画基础

要在组件中使用动画,我们需要如下的基本步骤来实现:
1、在
app.module.ts顶部添加以下代码:
import{BrowserAnimationsModule}from'@angular/platform-browser/animations';
2、在需要添加动画的组件文件顶部中添加如下代码:
import { trigger, state, style, animate, transition}from'@angular/animations';
说明:trigger用于定义触发器,state用于定义状态, style用于定义样式,animate用于定义时间线,transition用于定义过渡(转场)
3、在
需要添加动画的组件的元数据@Component({...})中定义一个名叫triggerName(这个名字由你决定)动画触发器,示例如下:
 
animations:[ trigger('triggerName', 
 
[ state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), 
   state
('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), 
   transition
('inactive => active', animate('100ms ease-in')), 
   transition
('active => inactive', animate('100ms ease-out')) 
  
]) 
]
  
4、将动画用于模板元素。
在模板中用[@triggerName]语法来把它附加到一个或多个元素上,示例如下:
<ul> <li *ngFor="let hero of heroes" [@triggerName]="hero.state" (click)="hero.toggleState()"> {{hero.name}} </li>  </ul>
说明:其中的 
 hero.toggleState()是组件中定义的一个方法,用于响应每个模板元素li的敲击事件以改变hero.state的值。

更详细的内容参见:
https://angular.cn/docs/ts/latest/guide/animations.html

*** 转载请注明本文地址:http://www.zhikeji.top/blogs/blog/231/ ***

上一篇:Angular实例之模板语法
下一篇:Angular实例之@HostListener装饰器