-
Notifications
You must be signed in to change notification settings - Fork 12
Experiment: Add view transitions API directive #241
Experiment: Add view transitions API directive #241
Conversation
Great exploration 🙂 It'd be cool to add this functionality ad-hoc to the movies demo so people can see what's possible, but wait more to merge it until we figure out the best way to do it for any theme. Maybe we can add the I think we won't port |
That makes sense to me 🙂 I'll try to work on that in the upcoming weeks. |
I've moved the |
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.
LGTM! 🎈
Let's add this change to start using |
I'm going to close this issue as part of the migration to the Gutenberg repository. These changes were already deployed to the wp-movies-demo site, but we won't merge them until we figure out better how to integrate the new View Transitions API. Please, go to this discussion to continue the conversation. |
I started exploring the possibility of creating a directive for the View Transitions API. Here you have a video with the explanation:
https://www.loom.com/share/39631b65aebf42b386f0fee14e0b3f58?sid=fd5f26d5-1105-43ab-87a0-d66467e6ebff
This is the branch of the movies repo.
Basically, what I did:
viewTransitionsAPI
in thewp-link
directive. If it is set to true, the viewTransitionsAPI is enabled while navigating. This already enables all the transitions that can be achieved only with CSS.data-wp-transition
directive:init
function that checks if the key defined in the directive matches the global state. If so, it adds the transition dynamically.There are some aspects to review, although it is already working more or less fine for the movies:
backdrop-filter
.wp-link
directive seems to cause a conflict.