0

I'm attempting to add an element to the DOM that's in an invisible state, and then animate it in.

Specifically:

  • I add an element to the DOM with the following inline styles: transition: all 200ms linear
  • I measure the element for positioning reasons using getBoundingClientRect (this is done before the element actually becomes visible)
  • I set transform: scale(0), which is the initial animation state
  • Next, I access the element's offsetHeight property in order to force a DOM reflow (see this question): void(elem.offsetHeight). This is done to have the applied styles actually take effect.
  • To display and animate the element, I set transform: scale(1)

The expected result is for the element to pop in with a nice animation. Everything works as expected when I have the devtools open in Firefox. When the dev tools are closed, the element doesn't animate at all about 80% of the time. In Chrome, the animations always work as expected.

Something about having the Firefox devtools open causes the elements to animate in deterministally. I suspect that the additional overhead, or perhaps additional querying of the DOM, is the causing the desired behavior when the devtools are open.

How do I get this to work deterministically?

I've tried adding the animated properties in a requestAnimationFrame callback to no avail, and have stopped short of accepting setTimeout as an acceptable solution due to the perceived input latency it would introduce, and the fact that it's a gross hack.

w.brian
  • 16,296
  • 14
  • 69
  • 118
  • nothing to do with the question but since the element is scaled to 0, why setting display to none ? – Temani Afif Mar 11 '18 at 22:33
  • I've updated the question to more accurately resemble what I'm doing – w.brian Mar 11 '18 at 22:45
  • Can you add a simple version of your code to this post, ideally as a runnable snippet? Hard to tell what's wrong without seeing it in action. (That said, you may want to look into the `TransitionEvent` types available - https://developer.mozilla.org/en-US/docs/Web/Events/transitionend and friends. Not sure if it addresses your problem, but it might.) – jack Mar 12 '18 at 01:47
  • I appreciate the advice! I'll put together an isolated reproduction and update the question some time tomorrow. – w.brian Mar 12 '18 at 02:48
  • Better than forcing a DOM reflow, it's to set the CSS change on a timeout – vals Mar 12 '18 at 20:23

0 Answers0