Angular 4+关键帧动画,停留在最后位置
Angular 4+ keyframe animation, stay on last position
我正在开发一个 Ionic3/Angular4 应用程序,我正在使用 angular 动画在我的屏幕上移动一个东西,一切正常,除了在动画结束时 div重置到它的原始位置,而不是停留在动画结束的最后一个位置,
我知道在 CSS 中,您只需将 'forwards' 添加到您的动画中,它就会保留在那里,但您如何在组件中实现它?
页面代码:
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>
在这种情况下,我希望 "rotator" 停止并停留在参数 X 和 Y
提前致谢。
终于找到方法了:
在您的动画元素上调用 .done
事件,例如
(@photoState.done) = "restart($event)"
然后在你的函数中——在我的例子中是 restart()
函数:
public restart(e): void {
document.querySelector('.rotator').setAttribute('style',
"transform: translate("+ this.finalXState +", "+ this.finalYState +")");
}
嘿,很高兴您找到了执行此操作的方法!我也有同样的问题。我发现了如何以另一种方式实现这一点,将它保存在动画部分,不需要进一步查询 select。除了您编写的带有关键帧的过渡之外,您还可以添加带有样式的状态定义。这应该类似于您在上一帧中定义的样式。
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 但也许它可以帮助其他人。
我正在开发一个 Ionic3/Angular4 应用程序,我正在使用 angular 动画在我的屏幕上移动一个东西,一切正常,除了在动画结束时 div重置到它的原始位置,而不是停留在动画结束的最后一个位置,
我知道在 CSS 中,您只需将 'forwards' 添加到您的动画中,它就会保留在那里,但您如何在组件中实现它?
页面代码:
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>
在这种情况下,我希望 "rotator" 停止并停留在参数 X 和 Y
提前致谢。
终于找到方法了:
在您的动画元素上调用 .done
事件,例如
(@photoState.done) = "restart($event)"
然后在你的函数中——在我的例子中是 restart()
函数:
public restart(e): void {
document.querySelector('.rotator').setAttribute('style',
"transform: translate("+ this.finalXState +", "+ this.finalYState +")");
}
嘿,很高兴您找到了执行此操作的方法!我也有同样的问题。我发现了如何以另一种方式实现这一点,将它保存在动画部分,不需要进一步查询 select。除了您编写的带有关键帧的过渡之外,您还可以添加带有样式的状态定义。这应该类似于您在上一帧中定义的样式。
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 但也许它可以帮助其他人。