Astro View Transitions First Look

[@Goyo_MGC]

I just implemented those on my website ^^ Some quick troubleshooting that i stumbled upon : - Make sure the key your are using ( aka the transition:name) to be CSS compliant ( i had some invalid char and the transition was not working) - You can combine transition:persist and transition:name into one single line ( transition:persist="..." ). For now i don't exactly why you would not want to use transition:persist every time instead of transition:name as it seems to be more performant in the island architecture but as it's new i couldn't really find any explanation. Loving how easy it is to setup tho !

[@CodinginPublic]

Yes, both good things to note. It's also important to note that client-side JS will not rerun on the new page. Astro provides some helpers to offset this behavior if needed. I decided on saving some of those until the stable version in case they change, but thanks for noting them here for those trying to implement this now!

[@bozzhik]

can I find out more about these helpers? I have links in the header that should be animated when clicked, but due to the fact that astro does not support spa and clicking on the link opens a new page, this is impossible. can you tell me which way I should look to solve this problem?

[@CodinginPublic]

Check out the linked docs. Another video coming next week with more details :) @@bozzhik

[@lvekua]

Wow, this is awesome! Thank you for sharing Chris!

[@CodinginPublic]

Glad you enjoyed it!

[@chrizzzly_hh]

And more beautiful transitions using the „morph“ style instead of fade 🎉

[@bqk95]

I was just about to try this on my new site 😂 This is a godsend

[@CodinginPublic]

🙌

[@suhaylmuminov3825]

Great content. Keep it up!

[@CodinginPublic]

Glad you enjoyed it!

[@combinio9533]

That's amazing! Thanks for quick explanation, awesome!

[@CodinginPublic]

So glad you found it helpful! Did an updated video here after 3.0 launch! kzbin.info/www/bejne/b4WXf2OZftF1i6c

[@egrekov]

great explanation!

[@CodinginPublic]

Glad it was helpful!

[@amoohesam]

Great 🎉 Thank you!

[@CodinginPublic]

Sure thing! There is a new video I just put out yesterday with a bunch of updates to this :)

[@galanghanafi737]

👍

[@ycemilk]

What is your os bud

[@CodinginPublic]

macOS. That what you’re asking?

[@biscuithammer]

Somehow viewtransition kills my hamburger nav's functionality.. 🤔

[@CodinginPublic]

Throw a transition:persist attribute on the menu :) I show more here. kzbin.info/www/bejne/b4WXf2OZftF1i6c

[@DanteMishima]

Ah yes, I saw this earlier....

[@ayb.s]

Pfow ##

[@CodinginPublic]

?