Angular increment animation doesn't stay in last position

Question

Im trying to trigger animation when the value of countAllOrders changes. Specifically, im trying to set the margin of list using keyframs in angular animation. My html is as follows:

  <ul class="digits" [@ordersValue]="countAllOrders" #digits>
    <li>0</li>
    <li>1</li>
    <li>{{ countAllOrders }}</li>
  </ul>

and the animation implementtation is:

  animations: [
    trigger('ordersValue', [
      transition(':increment', [
        animate('1s', keyframes([style({ marginTop: '-7em' })])),
      ]),
    ]),
  ],

the initial css of .digits sets margin-top:0em . during animation the desired effect works but instead of finishig with margin top's value to be -7em it ends with 0em. According to some answers I found here I tried to use state

trigger('ordersValue', [
  state(':increment', style({ marginTop: '-7em' })),
  transition(':increment', [
    style({ marginTop: '-7em' }),
    animate('1s', style('*')),
  ]),
]),

css:

.digits {
  list-style-type: none;
  margin-top: 0em;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

but that didnt help, any idea how to tackle this one?

Add style `animation-fill-mode: forwards` to your `.digits` class. — Sato Takeru, Oct 12 '21 at 08:09
Edited my post, I did have the property set but it doesnt help — yariv bar, Oct 12 '21 at 08:12
`animation-fill-mode` works when you set animation in style. You made animation in your javascript, so you it doesn't work. you can check [this answer](https://stackoverflow.com/questions/53049799/angular-4-keyframe-animation-stay-on-last-position) — Sato Takeru, Oct 12 '21 at 08:18
And also [this answer](https://stackoverflow.com/questions/28078911/prevent-element-from-returning-to-original-position-after-keyframe-animation). — Sato Takeru, Oct 12 '21 at 08:19
you mean add it in the javacript or css?. not sure I understood your answer. `animation-fill-mode: forwards` was set in my *.css file and not in the javascript — yariv bar, Oct 12 '21 at 08:25
Yes, but no `animatin-name` in your css file. So it doesn't work. — Sato Takeru, Oct 12 '21 at 09:11

score 0 · Answer 1 · answered Oct 12 '21 at 08:28

I'm not sure if in the keyframe you need to have a from marginTop: '0' and to marginTop: '-7em'?

Here is a link which might help : https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

Just add the last line animation-fill-mode:forwards; and remove the infinite at the end of the second last line.

  position: relative;
  animation: mymove 5s;
  animation-fill-mode:forwards;

Angular increment animation doesn't stay in last position

1 Answers1