是否可以为 Angular 2 的 ng-switch 设置动画

Question

是否可以对此进行动画处理？我有这段代码

div([ngSwitch]="switchState")
  ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="0")
   some-list
  ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="1")
   second-list  
  ul(fxLayout="row", fxLayoutAlign="space-between", *ngSwitchCase="2")
   third-list

实际的开关功能工作正常，我想为它制作动画，但我不确定 css 属性 angular 使用什么，我怀疑它甚至不存在于 DOM 中，所以是否可以为新添加的动画制作动画DOM？

Answer 1

是的，可以使用 Angular2 animation system 为 ng-switch 设置动画。

您可以在文档中阅读有关它的更多信息，但要点是您可以为添加到 DOM 的任何元素设置动画。使用 *ngSwitchCase 时，元素会根据条件被移除并插入到 DOM 中。此状态称为 void 状态，您可以选择在从 void 状态转换为可见时应用的动画。

鉴于以下使用ngSwitch 的标记：

<div [ngSwitch]="val">
   <p *ngSwitchCase="true" [@enterTrigger]="'fadeIn'">Value is TRUE</p>
   <p *ngSwitchCase="false" [@enterTrigger]="'fadeIn'">Value is FALSE</p>
</div>

您可以像这样在组件中定义动画：

@Component({
  selector: 'my-app',
  animations: [
    trigger('enterTrigger', [
    state('fadeIn', style({
        opacity: '1',
        transform: 'translateY(50%)'
    })),
    transition('void => *', [style({opacity: '0'}), animate('500ms')])
    ])
  ]
})

这里的void => * 过渡决定了元素从void 状态移动到任何状态（包括变得可见）时的动画效果

Plunkr 演示：https://plnkr.co/edit/IPLImRt34esClBg1HZdm?p=preview

P.S.别忘了安装@angular/animations