Transition to "height: auto;" & "display: none;" Using Pure CSS

Publié le: 31 mai 2024
sur la chaîne: CSS Weekly

11,822

612

Find out how to easily transition from “height: 0;” to “height: auto;” and “display: none;” to “display: block;” without any hacks, tricks, or JavaScript, using only new CSS features: calc-size() function, transition-behavior property and @starting-style at-rule.

UPDATE: The calc-size() function no longer supports a single argument; it works only as a two-argument form. The first argument is the basis, and the second argument is the calculation, where the passed basis argument is available as the "size" keyword. So all examples in the video should be "calc-size(auto, size)" instead of "calc-size(auto)".

🔗 Links
Demo: https://codepen.io/ZoranJambor/pen/GR...
CSS Stickers: https://stickers.css-weekly.com
Guide to Logical Properties:    • In-Depth Guide to CSS Logical Properties  Experimental Web Platform features:    • How to enable experimental CSS & JS f...

📖 Chapters
00:00 About CSS transitions & demo setup
01:26 How to transition to height: auto;
04:06 How to transition from display: none
04:43 How transition-behavior CSS property works
06:32 How @starting-style at-rule works
08:34 Browser support for transition-behavior & @starting-style

Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/

Help support my channel
🪧 Buy a CSS sticker pack: https://stickers.css-weekly.com
👨‍🎓 Get a course: https://masteringlinting.com/
💖 Jouin us on Patreon:   / cssweekly

Keep up-to-date with CSS Weekly:
🐦 Twitter:   / @cssweekly
🎶 TikTok:   / cssweekly
🎇 Instagram:   / cssweekly
📘 Facebook:   / cssweekly

Keep up to date with what I'm up to:
👨‍💼 Blog: https://zoranjambor.com
💼 LinkedIn:   / zoranjambor

- Zoran Jambor
#css #csstips

Sur cette page du site, vous pouvez voir la vidéo en ligne Transition to "height: auto;" & "display: none;" Using Pure CSS durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur CSS Weekly 31 mai 2024, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 11,822 fois et il a aimé 612 téléspectateurs. Bon visionnage!

1,067,219

46K