Why Do Element Transitions Fail When Initially Hidden?

Element Transitions Fail When Initially Hidden

Scenario Overview

Consider two elements, labeled 'A' and 'B', where 'B' is initially hidden using display: none. When using transitions to animate 'B' upon revealing it with methods like $.show() or $.toggle(), the element instantly appears at its final position without any animation.

Explanation

The root cause lies in the relationship between the Document Object Model (DOM) and the CSS Object Model (CSSOM). CSS transitions rely on the last computed value of an element. For elements initially hidden, the computed value is display: none, which essentially removes the element from the CSSOM.

DOM Manipulation and Reflow

The DOM manipulation phase involves updating a JavaScript object, which is an asynchronous process. In contrast, the reflow phase, which updates CSS rules and recomputes computed styles, occurs only when necessary. Since initially hidden elements have no computed styles, they don't trigger a reflow during DOM manipulation.

Transition Initial State

As a result, when the transition for 'B' starts, the initial state is not defined because the reflow hasn't occurred yet. This can lead to incorrect transitions.

Forcing a Reflow

To resolve this issue, you can force a reflow before triggering the transition. You can achieve this using Element.getBoundingClientRect() or element.offsetHeight, which require up-to-date computed values and, therefore, force a reflow.

Improved Example with Force Reflow

Here's a revised code snippet that forces a reflow before animating the transition:

$('button').on('click', function() {
  $('.b').show(); // apply display:block synchronously

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

By forcing a reflow before the transition is triggered, you ensure that the computed values are up-to-date, allowing the transition to work correctly.

The above is the detailed content of Why Do Element Transitions Fail When Initially Hidden?. For more information, please follow other related articles on the PHP Chinese website!