如何通过更改类而不是样式来为组件设置动画?

时间:2017-10-09 18:25:31

标签: css angular typescript

这是一个使用状态/样式概念的动画示例:

@Component({
animations: [
  trigger('myComponent', [
    state('state1', style({ xxxxx })),
    state('state2', style({ xxxxx })),
    transition('* => *', animate(500))
  ])
]

但我需要使用一个类而不是样式,即:

@Component({
animations: [
  trigger('myDIV', [
    state('state1', class('col-md-5')),
    state('state2', class('col-md-12')),
    transition('* => *', animate(500))
  ])
]

即。我想动画调整div列的大小:

<div class="row">
  <div class="col-md-5" [@myDIV]>
   <app-component1></app-component1>
  </div>
  <div class="col-md-7">
   <app-component2></app-component2>
  </div>
</div>

样式很好但不是Class。还有其他特殊方法吗?

由于

0 个答案:

没有答案