Skip to content

Bug: [animate.enter] fires during SSR hydration on elements already present in server-rendered HTML #69180

@eneajaho

Description

@eneajaho

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When using Angular SSR, elements inside @if blocks that use the new [animate.enter] binding incorrectly trigger their enter animation during client-side hydration — even though those elements were already present and visible in the server-rendered HTML.

Actual Behavior
The enter-animation class is applied during hydration, causing a jarring flash/expand animation on every page load — even though the content was already visible from SSR. This makes [animate.enter] effectively unusable in any SSR + hydration context where the initial state is true.

Expected Behavior
Elements already present in the server-rendered DOM at hydration time should not trigger [animate.enter]. Enter animations should only fire when an element is genuinely inserted into the DOM as a result of a state change after hydration is complete.

Please provide a link to a minimal reproduction of the bug

https://github.com/eneajaho/hydration-animate

Please provide the exception or error you saw


Please provide the environment you discovered this bug in (run ng version)

Latest Angular 22.

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: serverIssues related to server-side renderinggemini-triagedLabel noting that an issue has been triaged by gemini

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions