Creating different transitions depending on incoming/outgoing, and back/forward
Closed this issue · 2 comments
One thing I found tricky when creating https://http203-playlist.netlify.app/ was changing the animation depending on the presence of outgoing/incoming components. For example, when animating this sidebar:
When the sidebar is incoming, I want it to slide in from the right. When it's outgoing, I want it to slide out to the right. When it's neither outgoing or incoming, I'm happy with the default transition.
I achieved this by adding classes to the HTML element signaling the page type of the to & from pages, and from that I could infer if the sidebar was incoming/outgoing/neither. But this feels like a hack.
I thought something like ::page-transition-incoming-image(sidebar):only-child would work, but that doesn't appear to be the case. https://static-misc-3.glitch.me/page-transitions/has/
I also tried various things with :has, but couldn't get it to work.
Current docs for this: https://developer.chrome.com/blog/shared-element-transitions-for-spas/#changing-on-navigation-type
Does seem like there should be a better way.
Solved by adding :only-child