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

发布时间：2020-12-17 17:09:10 所属栏目：安全来源：网络整理

导读：我试图在组件的参数更改时触发动画,但只能在第一次将组件路由到时执行动画.使用不同参数对该组件的所有后续导航都不会触发动画. 例如,见this plunker. 导航时 /home 至 /home/animated/1 动画正在执行.如果只有ID改变,例如 /home/animated/2 一切都没有发生.

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

例如,见this plunker.

导航时

/home

至

/home/animated/1

动画正在执行.如果只有ID改变,例如

/home/animated/2

一切都没有发生.我错过了什么或者这是什么意思？

解决方法

我也碰到了这个问题,如果有人知道为什么请帮助 – 我的解决方案：

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

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 =>家庭组件/ 2等

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!