我正在使用Ionic3 / Angular4应用程序和Im使用角度动画在屏幕上移动一个东西,一切正常,除了在动画结束时div重置到其原始位置而不是停留在最后位置动画结束了,
我知道在CSS中你可以添加'转发'到你的动画,它会留在那里,但你如何在组件中实现它?
PageCode:
transition('* => move',
animate('2500ms', keyframes([
style({ transform: 'translateX(0)', offset: 0 }),
style({ transform: 'translateX(100%)', offset: 0.33 }),
style({ transform: 'translateX(40%)', offset: 0.66 }),
style({ transform: 'translate({{x}},{{y}})', offset: 1.0 })
]),
))
HTML:
<div class="image_container">
<a class="rotator" [@photoState]="{value: visibleState, params: {x: finalXState,y:finalYState}}"(@photoState.done) = "restart($event)" >
<div class="rotator_frame"></div>
</a>
在这种情况下,我希望“旋转器”停止并保持参数X和Y.
提前致谢。
嘿,你找到了办法做到这一点很好!我也有同样的问题。我发现了如何以另一种方式实现这一点,你将它保存在动画部分,不需要进一步的查询选择。除了使用您编写的关键帧进行过渡之外,还可以添加带样式的状态定义。这应该类似于您在上一帧中定义的样式。
state('move', style({ transform: 'translate({{x}},{{y}})'),
transition('* => move',
animate('2500ms', keyframes([
style({ transform: 'translateX(0)', offset: 0 }),
style({ transform: 'translateX(100%)', offset: 0.33 }),
style({ transform: 'translateX(40%)', offset: 0.66 }),
style({ transform: 'translate({{x}},{{y}})', offset: 1.0 })
]),
))
此外,在这种情况下,可以省略偏移定义,因为帧在动画时间内隐式地等间隔。我知道这对你来说是MarkwinVI,但也许它可以帮助别人。
终于找到了这样做的方法:
在您的动画元素上调用.done事件
(@photoState.done) = "restart($event)"
然后在你的函数中(我的情况下是restart()函数)
restart(e) {
document.querySelector('.rotator').setAttribute('style',
"transform: translate("+ this.finalXState +", "+ this.finalYState +")");
}