Angular 4+ keyframe animation, stay on last position

Question

Im working on an Ionic3/Angular4 app and Im using angular animations to move a thingy across my screen, and everything is working, except that at the end of the animation the div resets to its original position instead of staying at the last position where the animation ended,

I know that in CSS you can just add 'forwards' to your animation and it will stay there but how do you implement that in the component?

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>

In this case I want the "rotator" to stop and stay at parameters X and Y

Thanks in Advance.

Answer 1

Finally found a way to do this:

On your animated element call the .done event like

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

And then in your function—in my case the restart() function:

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