How to Trigger CSS Transitions on Appended Elements?

Triggering CSS Transitions on Appended Elements

Why Are Immediate CSS Animations Ignored?

When elements are appended to the DOM, browsers often batch reflows to optimize performance. However, this can lead to immediate CSS transitions being ignored, resulting in the end state of the transition being rendered immediately.

How and Why Do These Methods Work?

• setTimeout: Delays the class addition to a new JavaScript round, ensuring that there are two distinct style values for the rendering engine to interpolate during the transition.
• offsetWidth: Forces a reflow by accessing a reflow-causing property, triggering the initial style value calculation.
• focus: Triggers a synchronous reflow, allowing the transition to start immediately.

Are There Other Ways?

Other methods for triggering transitions on appended elements include:

• requestAnimationFrame: Schedules the class addition in the next browser frame, separating it from the initial appending round.
• MutationObserver: Observes DOM changes and triggers the transition accordingly.

Preferred Solution

The preferred solution is subjective, but many developers favor accessing offsetWidth as it enforces a synchronous reflow and guarantees the transition's execution. This method is also supported in major browsers.

The above is the detailed content of How to Trigger CSS Transitions on Appended Elements?. For more information, please follow other related articles on the PHP Chinese website!