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.

This is the type of thing I'd probably forego angular animation's stuff with and just do good 'ol fashioned css with the `animation-fill-mode` property set to `forwards` to retain the position of the last keyframe. — Chris W., Oct 29 '18 at 16:40
@ChrisW. Yeah I tried that, but i kind of need to specify the last parameters where the div should end up, and since it varies from time to time, making typescript communicate with scss is a bit of a pain. — Markwin, Oct 29 '18 at 16:47

score 2 · Answer 1 · answered Apr 05 '19 at 23:35

Hey nice that you found a way to do this! I was also having the same issue. I found out how to achieve this in another way, where you keep it in the animations section and dont need a further query select. In addition to the transition with keyframes that you wrote, you can add a state definition with styles. This should be something like the style that you defined in the last frame.

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 })

    ]),        
    ))

Furthermore, in this case the offset definition can be omitted as the frames are equally spaced out in over the animation time implicitly. I know it's on the late side for you MarkwinVI but maybe it can help someone else.

score 0 · Accepted Answer · edited Feb 16 '21 at 05:23

0

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 +")");
}

edited Feb 16 '21 at 05:23

Jeremy Caney

7,102
69
48
77

answered Oct 29 '18 at 17:05

Markwin

177
2
16

Angular 4+ keyframe animation, stay on last position

2 Answers2

Linked