angular2学习笔记之动画效果

动画是现代 Web 应用设计中一个很重要的方面。我们希望用户界面能在不同的状态之间更平滑的转场。如果需要,还可以用适当的动画来吸引注意力。 设计良好的动画不但会让 UI 更有趣,还会让它更容易使用。Angular 的动画系统赋予了制作各种动画效果的能力,以构建出与原生 CSS 动画性能相同的动画。 我们也获得了额外的让动画逻辑与其它应用代码紧紧集成在一起的能力,这让动画可以被更容易的触发与控制。angular2-demo

一、在两个状态间转场

1. 构建一个动画

它会让一个元素用模型驱动的方式在两个状态之间转场。动画会被定义在 @Component 元数据中。在添加动画之前,先引入一些与动画有关的函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import {
  Component,
  Input,
  trigger,
  state,
  style,
  transition,
  animate
} from '@angular/core';
//通过这些,可以在组件元数据中定义一个名叫 heroState 的 动画触发器 。它在两个状态 active 和 inactive 之间进行转场。 当英雄处于激活状态时,它会把该元素显示得稍微大一点、亮一点。
import { Heroes } from './hero.service';
@Component({
  moduleId: module.id,
  selector: 'hero-list-basic',
  template: `
    <ul>
      <li *ngFor="let hero of heroes"
          @heroState="hero.state"
          (click)="hero.toggleState()">
        {{hero.name}}
      </li>
    </ul>
  `,
  styleUrls: ['hero-list.component.css'],
  animations: [
    trigger('heroState', [
      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'))
    ])
  ]
})
export class HeroListBasicComponent {
  @Input() heroes: Heroes;
}
//我们刚刚定义了一个动画,但它还没有被用到任何地方。要想使用它,可以在模板中用 @triggerName 语法来把它附加到一个或多个元素上。
署名 - 非商业性使用 - 禁止演绎 4.0