参数更改时触发组件上的动画

Question

我尝试在组件参数更改时触发动画，但只能在第一次将组件路由到时执行动画。所有后续导航到具有不同参数的组件都不会触发动画。

例如，请参阅this plunker。

从

导航时

/home

到

/home/animated/1

动画正在执行。如果只有ID改变，例如

/home/animated/2

根本没有任何反应。我错过了什么或者这是什么行为？

Answer 1

我也遇到了这个问题，如果有人知道为什么请帮忙 - 我的解决方案：

我有一个自动转过幻灯片的旋转木马：

Component.HTML： 我必须在动画中包装路由组件的div

<div [@slideInOutAnimation]='mainState'></div> 

然后在路由到新ID时更改状态并在更改状态之前延迟，以便它可以再次运行以进行下一张幻灯片。

Component.TS：

this.mainState = 'enter';
var delayAnim = setTimeout(() => {
this.mainState = 'new';
},3000)

这是正在使用的动画的一部分 Animation.TS：

trigger('slideInOutAnimation', [

    state('new', style({
        ...
    })),

    transition('* => enter', [
    ...style...animate...
    ])

这样，当路由到一个新的id时，它将状态改为'enter'让动画运行然后将状态改回'new'，所以下一个路由它将能够再次运行动画。 home / component / 1 =＆gt;家庭组件/ 2等