Question

我正在Ionic3 / Angular4应用程序上工作，我正在使用角度动画在屏幕上移动一个东西，并且一切正常，除了动画结束时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处

谢谢。

Answer 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来说，这是很不利的一面，但也许可以帮助其他人。

Answer 2

最后找到了一种方法：

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

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

，然后在您的函数中（我的情况是restart（）函数）

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

}

Angular 4+关键帧动画，停留在最后一个位置

2 个答案: