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属性角度扮演什么，我怀疑当时它甚至不存在于DOM中，所以有可能动画新的添加到DOM？

Answer 1

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

您可以在文档中阅读有关它的更多信息，但要点是您可以为添加到DOM的任何元素设置动画。使用*ngSwitchCase元素时，会根据条件删除并插入DOM。这种状态称为void状态＆amp;您可以选择在从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设置动画

1 个答案: