是否可以为 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

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

Is it possible to animate Angular 2's ng-switch

javascript

angular

animation

ng-switch