-
Notifications
You must be signed in to change notification settings - Fork 292
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
Add createViewTransition function #1450
Add createViewTransition function #1450
Conversation
🦋 Changeset detectedLatest commit: f3deb70 The changes in this PR will be included in the next version bump. This PR includes changesets to release 28 packages
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 |
@askoufis not sure if you are the right person to ping here, but I'd love to contribute to this project. This PR was based on some work I've been doing and I'd love to get it merged. If there are other ways I can help out, I'm more than happy to do so as well! We're using vanilla-extract heavily and I'd love to help grow the project. Thanks! |
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.
Sorry for the delay @wuz. I'm happy to help get this through, though there's no API for actually writing a @view-transition
rule just yet.
@view-transition
rules are also a bit different to other existing rules in that they can be nested within media queries, but aren't related to any classnames. I might try make a POC for a viewTransition
API, and maybe that can be released alongside this API eventually.
@wuz I also can't run CI on your fork, you might have some restrictive permissions enabled. |
…tion-identifier' into wuz/add-view-transition-identifier
Co-authored-by: Adam Skoufis <askoufis@users.noreply.github.com>
Co-authored-by: Adam Skoufis <askoufis@users.noreply.github.com>
@askoufis Sorry, was out of office all week last week! Looking at this now! Let me see what's going on with the CI stuff, not sure what the permissions would be. Edit: Okay, I think I figured out the actions thing - it should work now? |
Thinking about this a bit, the API could look something like this: import { globalViewTransition, createViewTransition, createViewTransitionGroup } from '@vanilla-extract/css';
// assuming keyframes called fadeOut and fadeIn defined somewhere
globalViewTransition({
navigation: 'auto',
});
const fade = createViewTransition({
old: {
animationName: fadeOut,
},
new: {
animationName: fadeIn,
},
});
createViewTransitionGroup(fade, {
animationDuration: "0.25s",
animationTimingFunction: "ease",
}); becomes: @view-transition {
navigation: auto;
}
::view-transition-old(viewTransition_fade__jxjrfl) {
animation-name: fadeOut;
}
::view-transition-new(viewTransition_fade__jxjrfl) {
animation-name: fadeIn;
}
::view-transition-group(viewTransition_fade__jxjrfl) {
animation-duration: 0.25s;
animation-timing-function: ease;
}
*/ |
I'm unsure if we'd expose APIs like For defining the |
e629e6b
to
5a09c55
Compare
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.
Thanks @wuz!
@wuz This has been released in https://github.com/vanilla-extract-css/vanilla-extract/releases/tag/%40vanilla-extract%2Fcss%401.16.0 |
@askoufis Awesome! Thanks so much! |
View transitions are starting to get more support and it would be nice to use the same API style from
createContainer
to create locally scoped view transition names.This PR adds a
createViewContainer
function with aname
arg and an optionaldebugId
arg.Definitely open to suggestions on naming here - similar to CSS container queries, View Transitions have a
view-transition-name
css property and I thought it would track better withcreateContainer -> container-name
to havecreateViewTransition -> view-transition-name
.