动画会被定义在@Component元数据中。在添加动画之前，先引入一些与动画有关的函数：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {  trigger,  state,  style,  animate,  transition} from '@angular/animations';

基本用法

在在组件中导入，并在@Component中加上元数据animations: [triggerName]，最后对应组件中模板元素加入@triggerName=state属性即可使用动画。

animations: [    trigger('triggerName', [      state('state1', style({        cssStyle: '...',        transform: 'transform-functions'      })),      state('state2',   style({        cssStyle: '...',        transform: 'transform-functions'      })),      transition('state1 => state2', animate(duration delay timing-function,style({...}))),      transition('state2 => state1', animate(duration delay timing-function,style({...})))    ])  ]

*(通配符)状态

*(通配符)状态匹配任何动画状态。当定义那些不需要管当前处于什么状态的样式及转场时，这很有用。比如：

• 当该元素的状态从active变成任何其它状态时，active => *转场都会生效。

• 当在任意两个状态之间切换时，* => *转场都会生效。

• transition('* => void', [

   

void状态

有一种叫做void的特殊状态，它可以应用在任何动画中。它表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。void状态在定义“进场”和“离场”的动画时会非常有用。

比如当一个元素离开视图时，* => void转场就会生效，而不管它在离场以前是什么状态。

可动的(Animatable)属性与单位

由于Angular的动画支持是基于Web Animations标准的，所以也能支持浏览器认为可以参与动画的任何属性。这些属性包括位置(position)、大小(size)、变换(transform)、颜色(color)、边框(border)等很多属性。W3C维护着 。

自动属性值计算

有时候，我们想在动画中使用的尺寸类样式，它的值在开始运行之前都是不可知的。比如，元素的宽度和高度往往依赖于它们的内容和屏幕的尺寸。处理这些属性对CSS动画而言通常是相当棘手的。

如果用Angular动画，就可以用一个特殊的*属性值表示样式文件中设定的值。

state('in', style({height: '*'})),

基于关键帧(Keyframes)的多阶段动画

通过定义动画的关键帧，可以把两组样式之间的简单转场，升级成一种更复杂的动画，它会在转场期间经历一个或多个中间样式。

每个关键帧都可以被指定一个偏移量，用来定义该关键帧将被用在动画期间的哪个时间点。偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间的数组。

animate(300, keyframes([        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),        style({opacity: 1, transform: 'translateX(15px)',  offset: 0.3}),        style({opacity: 1, transform: 'translateX(0)',     offset: 1.0})

其中的offset表示这个动画的进度，0-1.0。

并行动画组(Group)

为多个CSS属性定义不同的缓动函数

group([        animate('0.3s 0.1s ease', style({          transform: 'translateX(0)',          width: 120        })),        animate('0.3s ease', style({          opacity: 1        }))      ])    ]),

动画回调

当动画开始和结束时，会触发一个回调。

对于例子中的这个关键帧，我们有一个叫做@flyInOut的trigger。在那里我们可以挂钩到那些回调，比如：

template: `  
    
    
     
      {
   {hero.name}}    
  
    
`,

这些回调接收一个AnimationTransitionEvent参数，它包含一些有用的属性，例如fromState，toState和totalTime。

无论动画是否实际执行过，那些回调都会触发。