Why Don't CSS Transitions Work on Initially Hidden Elements?

CSS Transitions Not Working on Initially Hidden Elements

Understanding the Issue

In the scenario described, there are two divs, one of which is initially hidden using display:none. When the hidden div is revealed using methods like show() or toggle(), its property transition does not occur smoothly. Instead, the div appears instantly at the desired end position.

Cause of the Behavior

To understand this behavior, we need to delve into the relationship between the CSSOM (CSS Object Model) and the DOM (Document Object Model).

CSS transitions rely on knowing the element's initial computed style values to determine the starting point of the transition. However, elements with display:none have no computed style values because they are not considered visible in the CSSOM.

Influence of Reflow

Reflow is a browser operation that recalculates the layout of the document based on changes to the DOM or style rules. When display:none is removed, the browser initiates a reflow to update the DOM and computed style values.

In the given scenario, if the transition begins before the reflow occurs, the initial computed style values for the hidden div will be invalid, leading to the abrupt appearance.

Resolving the Issue

Option 1: Using $.animate()

$.animate() triggers a reflow before executing the animation, ensuring that the computed style values are up-to-date.

Option 2: Manually Forcing a Reflow

Using requestAnimationFrame() allows us to schedule code execution before the next paint operation. Inside the callback, we can force a reflow using a method like document.body.offsetHeight, and then immediately trigger the transition by setting the desired CSS property values.

Conclusion

The abrupt appearance of initially hidden elements during CSS transitions is due to the lack of valid computed style values. By understanding the reflow process and using techniques to force a reflow, we can ensure smooth transitions for elements that are initially hidden.

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