[英]Trigger animation on component when parameters change
我试图在组件的参数更改时触发动画,但只能在第一次将组件路由到时执行动画。 使用不同参数对该组件的所有后续导航都不会触发动画。
例如,请参阅此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 => home component / 2等
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.