-
-
Notifications
You must be signed in to change notification settings - Fork 2.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Initial View Transition Support #7511
Conversation
🦋 Changeset detectedLatest commit: ecfadd7 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR is blocked because it contains a minor
changeset. A reviewer will merge this at the next release if approved.
!preview view-transitions |
|
!preview view-transitions |
|
!preview view-transitions |
|
!preview view-transitions |
33c7cbf
to
a480e8d
Compare
Co-authored-by: Emanuele Stoppa <[email protected]>
Co-authored-by: Emanuele Stoppa <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! Also tested locally and it works. I notice there's a transition difference between native and fallback in the blog
example, but I don't think that can be easily fixed without more complexity.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR is blocked because it contains a minor
changeset. A reviewer will merge this at the next release if approved.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some suggestions for the changeset! 🙌
Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This PR is blocked because it contains a minor
changeset. A reviewer will merge this at the next release if approved.
This is an experiment in View Transition support in Astro. You can enable the preview release to play around with:
There are a couple of parts to this to understand:
Animation directives
This PR adds a new directive
transition:animate
which takes a few values'morph' | 'slide' | 'fade'
.You use it like so:
Each element you animation gets a
view-transition-name
CSS property. Astro will auto-generates these for you based on the position within the DOM. Some times if you are morphing two elements that are located in different places the auto-generation won't work, in which case you can manually specify a transition name:index.astro
post.astro
Enabling View Transitions
The feature needs to be enabled on a per-page basis. If you are using a layout or head component you can enable it cross-site that way.
SPA mode
This works in all Chromium based browsers (Chrome, Edge, Opera, Vivaldi), stable.
MPA mode
This works only in Chrome Canary after enabling a couple of flags.
Notice that this is the same as SPA mode, but instead of using our ViewTransitions component you add a meta tag instead. This means 0 JS.
Browser support
This PR targets browsers that support view transitions. In the future we would like to provide similar abilities via some sort of fallback implementation. How that works is TBD.
For this release it's relevant to decide what to do about non-supported browsers. We could either:
Changes
Testing
Docs
Not yet.