如何使用Angular 4动画进入多个状态?

时间:2017-10-25 15:19:34

标签: angular angular-animations

我正在使用Angular 4动画,我想知道从初始状态到最终状态的最佳方式是什么,通过其他状态。 如果我们以此为例(https://angular.io/guide/animations):

animations: [
  trigger('animationState', [
    state('stateOne', style({
      // some style
    })),
    state('stateTwo',   style({
      // some style
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

所以问题是,如果我添加第三个和第四个状态并且我将活动状态从'stateOne'切换到'stateTwo',那么如何定义转换以便它自动通过其他类似的转换: stateOne => stateThird => stateFourth => stateTwo 即可。有没有办法定义过渡以获得此行为而没有任何变通方法?

1 个答案:

答案 0 :(得分:0)

您可以使用角度关键帧

https://angular.io/guide/animations#multi-step-animations-with-keyframes

我认为有角度的文档对此有最好的解释