Skip to content

feat(router): add opt-in View Transition support to Link - #5755

Open
rexlunae wants to merge 1 commit into
DioxusLabs:mainfrom
rexlunae:feat/view-transition-link
Open

feat(router): add opt-in View Transition support to Link#5755
rexlunae wants to merge 1 commit into
DioxusLabs:mainfrom
rexlunae:feat/view-transition-link

Conversation

@rexlunae

Copy link
Copy Markdown

Closes #2658

Adds a view_transition prop (default false, opt-in) to the router's Link component. When enabled, clicking the link wraps the navigation in the browser's View Transition API (document.startViewTransition), animating the route change. This is a no-op on browsers/webviews that don't support the API.

How it works
The click handler calls document.startViewTransition(() => {}) via dioxus_document::eval before router.push_any. The old page state is captured synchronously at call time; Dioxus applies the DOM mutations in the microtask checkpoint right after the event handler; the browser captures the new state on the next frame — inside the transition.

Notes

  • Works on web and desktop (wry webview); JS guard makes it a no-op where unsupported.
  • SSR is unaffected: the click handler never runs server-side, and dioxus-document's no-op document would only produce an async EvalError::Unsupported that is never awaited.
  • The dioxus-document dependency is optional and tied to the existing html feature, matching dioxus-html.

Testing

  • cargo test -p dioxus-router: all pass (51 tests)
  • cargo clippy -p dioxus-router: clean
  • cargo fmt -p dioxus-router --check: clean
  • Not manually browser-tested in this environment — would appreciate a dx serve sanity check.

cc @ealmloff @jkelleyrtp

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

View Transition API

1 participant