You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Today a view transition only plays when a navigation goes through the router — <Link viewTransition> or navigate({ viewTransition }). When the user presses the browser's Back/Forward buttons, the same navigation plays a hard cut instead of the transition.
I'd like an opt-in that replays the transition an entry was created with whenever the user traverses to it, so the animation is symmetric: a transition opted into on A → B plays on both B → A (back) and a later A → B (forward).
Why
The asymmetry is visible. An app can animate A → B via a Link, then hard-cut when the user hits Back to return. Users notice the inconsistency.
defaultViewTransition is all-or-nothing. The only way to animate traversals today is to turn on transitions for every navigation. There's no way to opt one flow in and have it round-trip.
It matches intent. If you asked for a transition going one way, getting it on the way back is almost always what you wanted.
Open questions
API shape — a dedicated opt-in option, or fold this into defaultViewTransition?
Default — should replay be off by default (conservative), or on for navigations that already opted into a transition (treating the asymmetry as a bug)?
Prototype
Implementation, tests, and a runnable example are in #7697. Feedback on the direction and the two questions above would be very welcome before it moves forward.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
What
Today a view transition only plays when a navigation goes through the router —
<Link viewTransition>ornavigate({ viewTransition }). When the user presses the browser's Back/Forward buttons, the same navigation plays a hard cut instead of the transition.I'd like an opt-in that replays the transition an entry was created with whenever the user traverses to it, so the animation is symmetric: a transition opted into on
A → Bplays on bothB → A(back) and a laterA → B(forward).Why
A → Bvia aLink, then hard-cut when the user hits Back to return. Users notice the inconsistency.defaultViewTransitionis all-or-nothing. The only way to animate traversals today is to turn on transitions for every navigation. There's no way to opt one flow in and have it round-trip.Open questions
defaultViewTransition?Prototype
Implementation, tests, and a runnable example are in #7697. Feedback on the direction and the two questions above would be very welcome before it moves forward.
Beta Was this translation helpful? Give feedback.
All reactions