Page Transition
Animates incoming page content when NavigationManager reports a location change. Place it around the layout body, or around RouteView, so it stays mounted across navigation.
Placement decides whether it works
The component must stay mounted across navigation, so put it around
@Body in a layout or around RouteView.
Inside a page component, every navigation creates a new instance, and a new instance never animates its first render.
The host must also render interactively — under static server rendering nothing animates.
Around the Layout Body
The usual placement. The component subscribes to
NavigationManager.LocationChanged and uses the full URI as its key, so any navigation to a different URI plays the entrance animation on the new content.Around RouteView
Wrapping
RouteView works too, and keeps FocusOnNavigate in the router where it belongs. Page Transition does not move focus, set page titles or restore scroll position — keep doing all three the normal way.Query String Navigation
A query string change is still a location change, so a page that stays mounted animates when its parameters change. This is the one case where placing the component inside a page works.