Angular 4+关键帧动画，保持在最后一个位置答案

【问题标题】：Angular 4+ keyframe animation, stay on last positionAngular 4+关键帧动画，保持在最后一个位置
【发布时间】：2018-10-29 16:22:53
【问题描述】：

我正在开发一个 Ionic3/Angular4 应用程序，我使用角度动画在我的屏幕上移动一个东西，一切正常，除了在动画结束时 div 重置到其原始位置而不是停留在最后动画结束的位置，

我知道在 CSS 中，您可以在动画中添加“转发”，它会保留在那里，但您如何在组件中实现它？

页面代码：

      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 上

提前致谢。

【问题讨论】：

这是我可能会放弃使用角度动画的东西的类型，只是将animation-fill-mode属性设置为forwards以保留最后一个关键帧的位置.
@ChrisW。是的，我试过了，但我有点需要指定 div 应该结束的最后一个参数，而且由于它不时变化，让 typescript 与 scss 通信有点痛苦。

标签： angular ionic3 angular-animations

【解决方案1】：

嘿，很高兴你找到了一种方法来做到这一点！我也有同样的问题。我发现了如何以另一种方式实现这一点，您将其保存在动画部分中，并且不需要进一步的查询选择。除了您编写的带有关键帧的过渡之外，您还可以添加带有样式的状态定义。这应该类似于您在上一帧中定义的样式。

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 对你来说已经很晚了，但也许它可以帮助其他人。

【讨论】：

【解决方案2】：

终于找到了办法：

在您的动画元素上调用.done 事件，例如

(@photoState.done) = "restart($event)"

然后在你的函数中——在我的例子中是restart() 函数：

public restart(e): void {
    document.querySelector('.rotator').setAttribute('style',
    "transform: translate("+ this.finalXState +", "+ this.finalYState +")");
}

【讨论】：