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

Publicado el: 31 mayo 2024
en el canal de: 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

En esta página del sitio puede ver el video en línea Transition to "height: auto;" & "display: none;" Using Pure CSS de Duración hora minuto segunda en buena calidad , que subió el usuario CSS Weekly 31 mayo 2024, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 11,822 veces y le gustó 612 a los espectadores. Disfruta viendo!

4,093