HomePhabricator

Replace transition with animation

Description

Replace transition with animation

CSS transitions are triggered when the property they target is changed.
It seems there is a race between laying out the image, which would
involve a style recalculation, as it's inserted into the DOM and
triggering the transition. Previously, the solution was to yield
execution via setTimeout( () => /* ... */, 100 ) so that the layout
completed and the transition could be triggered reliably.

One possible solution is to force the browser to recalculate the styles
of the element on which we want to trigger the transition. This can be
done a number of ways but getComputedStyle [0] is often recommended.
getComputedStyle is synchronous - no setTimeout required - but can force
a layout when there are viewport-related media queries applied [1].

CSS animations, however, simply start playing automatically. Moreover,
like transitions, animations are widely supported [2] and degrade
gracefully.

Credit for this solution goes to Christian Heilmann [3]

[0]: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
[1]: https://gist.github.com/paulirish/5d52fb081b3570c81e3a#getcomputedstyle
[2]: http://caniuse.com/#feat=css-animation
[3]: https://www.christianheilmann.com/2015/08/30/quicky-fading-in-a-newly-created-element-using-css/

Bug: T126592
Bug: T124770
Change-Id: I1f8096bf53b8c1adba45ae5a83c77a41ae553c27

Details