angular - 参数变化时在组件上触发动画

Question

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

例如，请参见这个 plunker。

从导航时

/home

至

/home/animated/1

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

/home/animated/2

什么都没有发生。我错过了什么或者这是预期的行为？

score 1 · Accepted Answer

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

我有一个自动通过幻灯片的轮播：

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

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

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

组件.TS：

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

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

trigger('slideInOutAnimation', [

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

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

这样，当路由到新的 id 时，它会将状态更改为“进入”，让动画运行，然后将状态更改回“新”，这样下一条路由就可以再次运行动画。home/component/1 => 家庭组件/2 等

1 回答 1