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

@eveeifyeve eveeifyeve left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Diff LGTM, I will do a follow-up run review with one of my business products that is in the works in a couple of working days.

For some reason I can't approve, so the best I will do is a followup comment saying LGTM.

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

2 participants