Why Doesn't CSS Transition Work on Initially Hidden Elements?

CSS Transition Not Working on Initially Hidden Element

When an element is initially hidden using CSS's display: none, any CSS transitions applied to it will not trigger when its visibility is changed. This is because CSS transitions rely on the element's initial computed style, which for a hidden element, will be empty.

CSSOM vs. DOM

To understand this behavior, it's important to distinguish between the CSS Object Model (CSSOM) and the Document Object Model (DOM). The DOM represents the hierarchical structure of the HTML document, while the CSSOM contains the computed styles for each element.

Reflow and Paint

When the visibility of an element is changed, the browser needs to update the CSSOM and reflow the page to reflect the changes. Reflow recalculates the computed styles and positions of elements based on their CSS rules. Painting is the process of rendering the page on the screen, which occurs after reflow.

Transition Initiation

CSS transitions work by interpolating between the element's initial computed style and its final style. When an element is initially hidden, its computed style will be empty, so the transition algorithm cannot create the initial state.

Solution: Force Reflow

To trigger the transition on a hidden element, it is necessary to force a reflow after changing its visibility. This can be achieved using the requestAnimationFrame API, which executes a callback just before the browser paints the page.

By using requestAnimationFrame, it is possible to apply the CSS transition after the browser has updated the CSSOM, allowing the transition to start correctly.

Example

Here is a modified version of your code using requestAnimationFrame to force a reflow:

$('button').on('click', function() {
  $('.b').show();

  requestAnimationFrame(() => {
    document.body.offsetHeight; // Force a reflow
    $('.b').css('right', '80%');  // Trigger the transition
    $('.a').css('right', '80%');
  });
});

In conclusion, CSS transitions will not work on initially hidden elements because the CSSOM does not contain an initial computed style for them. To trigger the transition, it is necessary to force a reflow after changing the visibility of the element.

The above is the detailed content of Why Doesn't CSS Transition Work on Initially Hidden Elements?. For more information, please follow other related articles on the PHP Chinese website!