## Angular 2 动画笔记 Angular 2 的动画定义在组件装饰器的`animations`属性中。 Angular 2自定义了一套动画描述语言(DSL)，用于映射CSS3动画，过度，变换操作。在使用时则是调用一系列动画函数。 通过查看动画相关的api，可以发现一共有3个抽象类`AnimationMetadata`，`AnimationStateMetadata`和`AnimationWithStepsMetadata`，其中`AnimationWithStepsMetadata`扩展了`AnimationStateMetadata` 抽象类。 ### 定义类和实现函数 ``` trigger => AnimationEntryMetadata state => AnimationStateDeclarationMetadata extends AnimationStateMetadata transition => AnimationStateTransitionMetadata extends AnimationStateMetadata keyframes => AnimationKeyframesSequenceMetadata extends AnimationMetadata style => AnimationStyleMetadata extends AnimationMetadata animate => AnimationAnimateMetadata extends AnimationMetadata sequence => AnimationSequenceMetadata extends AnimationWithStepsMetadata group => AnimationGroupMetadata extends AnimationWithStepsMetadata ``` ### 使用方式 ``` |- trigger[] |- state |- style |- transition |- style |- animate |- style |- keyframes |- keyframes[] |- style |- sequence # 可以嵌套 |- style |- animate |- sequence |- group |- group # 可以嵌套 |- style |- animate |- sequence |- group ``` > 注：`keyframes`中能用于`animate`方法内 ### 特殊状态 - \* \*(通配符)状态匹配任何动画状态。 - void 有一种叫做void的特殊状态，它可以应用在任何动画中。它表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。 void状态在定义“进场”和“离场”的动画时会非常有用。 使用void和*状态，可以定义元素进场与离场时的转场动画： - 进场：void => * - 离场：* => void > 注： `void => *` 对应别名：`:enter`， `* => void` 对应别名：`:leave` ### 使用方式 - 在模块中 ```typescript @Component({ animations: [ trigger('motion_1', [ state('show', style({ // ... })), transition('void => *', ), ]), trigger('motion_2', [ ]) ] }) ``` - 在视图中 ```html <div @motion></div> <div [@motion]='state'></div> ```