Why Don't CSS Transitions Work on Hidden Elements?

CSS Transition Not Triggering for Hidden Elements

In web development, it's common to use CSS transitions to animate changes to an element's properties. However, a common stumbling block is when an element is initially hidden (e.g., with display: none) and then becomes visible, but the CSS transition doesn't activate.

Behind the Scenes with CSSOM and DOM

To understand this behavior, we need to consider the relationship between the CSS Object Model (CSSOM) and the Document Object Model (DOM). The DOM represents the HTML structure of the page, while the CSSOM represents the computed styles for each element.

During the rendering process, DOM manipulations (e.g., changing the display property) happen first. Then, the browser recalculates the computed styles (CSSOM) for all elements on the page, known as reflow or layout. Finally, the changes are visually rendered on the screen (paint).

Impact on CSS Transitions

CSS transitions require the initial computed style of the element to calculate the start state. However, for hidden elements, the computed styles are essentially null because they are not displayed. This means that when a transition is triggered, the initial state is invalid for any transitionable value.

Solutions

To resolve this issue, you can use one of the following approaches:

• Force a Reflow: Using requestAnimationFrame or other methods that trigger a reflow forces the browser to recalculate the computed styles. By invoking a reflow just before the transition is triggered, you ensure that the computed styles are up-to-date.
• Use $.animate()**: .animate() internally forces a reflow by triggering DOM manipulation and then scheduling a callback to trigger the transition. However, this approach is typically slower than using a direct reflow method.

Example

The following code snippet demonstrates how to force a reflow using requestAnimationFrame:

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

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

By using requestAnimationFrame, we ensure that the CSS transition will trigger successfully, even for initially hidden elements.

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