0

I have a simple observable representing the length of a list.

As it evolve, I want to animate increments and decrements of that number, for example:

  • the number increases
  • I fade out the previous value
  • I fade in the new value

But during the fade out, I can see the next value being already updated. The 2 ways I found to solve the problem are :

  • manually manage value update by subscribing to observable from the TS controller
  • the rxjs operator delayWhen to conditionnaly delay the value update (here is a french explanation of that method there is code as example)

Both seem too complicated for what I want. So here my question.

Is there a way to block DOM updates while animating an element?

Alexandre SIRKO
  • 816
  • 11
  • 22
  • you can assign the new data in the callback function `(@animation.done)`. More details here: https://stackoverflow.com/questions/40246853/an-example-of-angular-2-animation-ended-callback-function – Jacopo Sciampi Feb 26 '19 at 13:20
  • It exactly what I mean by manually manage the value. It's work, but I would prefer a way to freeze the dom while animating... – Alexandre SIRKO Feb 27 '19 at 13:27
  • 1
    It's a very interesting question but I think it's either not possible or there is no easy solution out there yet. I personally had the same issue and implemented an abstract service that is doing all your "manuall-manage" stuff out of the box. – Jonathan Stellwag Feb 28 '19 at 08:02

0 Answers0