Transition to "height: auto;" & "display: none;" Using Pure CSS
ฝัง
- เผยแพร่เมื่อ 2 ก.ค. 2024
- 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.
🔗 Links
Demo: codepen.io/ZoranJambor/pen/GR...
CSS Stickers: stickers.css-weekly.com
Guide to Logical Properties: • In-Depth Guide to CSS ... Experimental Web Platform features: • How to enable experime...
📖 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:
💌 css-weekly.com/
Help support my channel
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
👨🎓 Get a course: 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: zoranjambor.com
💼 LinkedIn: / zoranjambor
- Zoran Jambor
#css #csstips - วิทยาศาสตร์และเทคโนโลยี
![แม่กลองสองใจ - ซีแกรม โตเกียว มิวสิค [ OFFICIAL MUSIC VIDEO ]](http://i.ytimg.com/vi/GSQfVjcr_f4/mqdefault.jpg)
Thanks Zoran for introducing calc-size and starting-style.
We can now significantly cut down on JavaScript code and safely eliminate animation libraries by placing the declarations directly in CSS where they belong. good stuff 🙌
PS: ☝the "extra padding" can be eliminated by adding 'box-sizing: border-box;' to the container.
Indeed! It's so nice to see that all of this can be done natively in CSS. 🙂
Thanks so much for the box-sizing tip, Daniel! It does work. 🙂
this is pretty cool!!
Thanks! I'm glad you think so, Paul! 🙂
Thanks, that was a great explanation, especially this "allow-discrete"
Thank you so much! I'm thrilled to hear you think so! 🙂
Lorem ipsum dolor 🔥🔥
Sit amet, consectetur. 🙂
Thanks Zoran a very straightforward explanation that I've seen explained recently in a very complicated manner 👍
Thank you so much; I'm incredibly happy to hear this, Tony! It means a lot! 🙏
Is there any chance you could share where you've seen the other explanation? I'd like to see what I did differently for future videos. You don't have to share it publicly if you're not comfortable with it. 🙂
@@CSSWeekly Hi Zoran, I think what I meant was that your demo (all your demos actually!) focus in on the topic by keeping it simple & focussing in on the actual topic in a nice isolated example to make your point. Personally I find it clearer this way. I've implemented some of your topics to great effect on some of the sites I'm working through on a course I'm taking to enhance the sites I'm writing! Some of the other examples from other really good youtube creators/teachers have taught the topic inside a more complex example where there's more going on than just the core topic. Sometimes I find it less clear when its dressed up in a more complex example.
I don't need it super dumbed-down, I'm getting the hang of it, but unlike a pure programming language I can get my head around fine, as it's where I came from, I sometimes find HTML & CSS a little baffling at times. I'm in my 50's, did some college back in the day, got my 1st programming job back in 1989 using cobol & old school 4GL procedural languages, & had a 16 year career working in various small and medium sized software houses, moving into OOP & SQL in languages like vb & delphi, before moving off in a different direction. Over the last couple of years I started casually re-engaging with software dev in a hobbyist capacity, out of boredom in my spare time & recently I've been doing more & more HTML, CSS & JS and it's pulling me back in and I'm loving it!
On a separate topic, I wonder if you could create a CSS nesting video. At the moment I'm working through a great Udemy HTML CSS & JS course, but the course is a couple of years old & not updated to reflect the newer CSS methods you & others deal with. They're still using the classic way of writing CSS , for example, classic padding & margin & not block-level, & header {}, then header nav {}, then header nav ul {}, then header nav ul li {}, then header nav ul li a {}" . I've watched a few videos on nesting but from quite a while back when browser support wasn't as widespread as it is now. I apologise if you have one already, I did look but didn't notice one. I know I'd love seeing a CSSWEEKLY video on this topic, clearly explaining it all. Keep it up mate! 👍
Thank you so much for all your insight and compliments, Tony! It really means a lot! 🙏
Oh, I was working with Cobol at my first programming job, too! It was mainly maintenance on an existing sytem, around 2005. I moved on to Web Development after that. 🙂
You'll be happy to hear I have a nesting video planned and ready to record. So, hopefully, it will be on the channel in the next two weeks. 🙂
I didn't hear about calc-size() and I think it will solve a lot of headaches.
Thanks Zoran.
Yes, hopefully it will! Thanks, Ahmad! 🙂
The more css properties you have, the more problems you receive. To solve those new problems new css properties are introduced.
Yes, this might be the case with new features regardless if we're talking about CSS or something entirely different. 🙂
And I think you might like my quick tip precisely on the subject of solving all CSS problems in one fell swoop: th-cam.com/users/shortsnXpsbTiAGwc
@@CSSWeekly Oh, that tip, how can I forget about it 😁🤦♂
wow, thanks for sharing
Thank you, Huynh, for watching and commenting! 🙏
@@CSSWeekly keep going :d
Sure thing, I will! 🙏
awesome
Thanks so much! 🙏
Thanks a lot. It was pretty hard to do with JS
Indeed, Nasim. It's much easier and nicer to do this with CSS. Thanks for watching and for your comment! 🙏
LOL at 8:44 🤣
very helpful video. thanks
I'm thrilled you think so, Fitsum! 🙂
But the important question is: did it work? 😊
Awesome video, calc-size was also new to me just recently seen it popping up but looking forward to use it with the new pseudo element ::details-content where I have seen it used with.
Your should do a follow-up video for @starting-style with the HTML dialog and/or popover with the overlay property.
One point I would like to point out is you should avoid using transition all
Thanks so much for your insight and thoughtful reply, Sean! I really appreciate it! 🙏
Yes, I will do a few follow-up videos, and the first one, which is nearly done, is on animating the HTML details element. Popover is certainly something I intend to cover soon. 🙂
You're right about using "all" with transitions. Thanks for pointing it out! 🙏
8:40 the actual TH-cam subscribe button glows when you talk about subscribing? 🤯
I've heard that TH-cam does this, but I haven't seen it in action yet. 🤩
It's pretty cool. As the video has the transcript, they only need to trigger the animation at the timestamp when the "subscribe" word is mentioned. And I really want to play around with this and try to recreate it-maybe even do a video showcasing how it works. 🙂
But the most important question is: did it work? 🙂
Which CSS-only solution would you recommend that is working across all (major) browsers today?
My go-to for this is the CSS grid hack (transitioning grid template rows for 0fr to 1fr) but I'm not sure if there is any other solution that cool kids are doing currently? 😅
Thanks for your question, Luka. 🙏
The CSS Grid approach with fraction units is the only pure CSS solution I'm aware of that works in all major browsers today, so that's exactly what I'd recommend. 🙂
transition on toggling `visibility` property to "hidden"|"visible" has applied on transition-end by default for a couple of years, it doesn't need transition-behavior: allow-discrete.
Thanks so much for clarifying; I wasn't aware of this. 🙏
@@CSSWeekly regardless the possibility of transitioning on `display` is very exciting, due to the fact that `visibility` preserves layout geometry of that element, so for non-overlaying elements its not ideal.
Indeed it is! 🙂
Have you tried animating a switch from display grid to display flex? Or between different grid layouts?
That's a fantastic question! 🙏
I don't think it's possible. The transition on "display" happens instantly; it just "flips" at the correct time-before the animation starts or after it finishes.
You can animate changes in CSS Grid, but I haven't explored this yet, so I can't tell to what extent. Animating track sizes is possible, but I'm not sure if that's the case when switching between different grid layouts-at least not with a simple transition or animation. 🤷♂️
@@CSSWeekly sounds to me like it's time to have a play 👍 great video thanks...
You're very welcome! 🙂
No way, I was just running into that issue working around it with max-width. I accidentally opened my mail client and it showed me the front end focus newsletter where this was linked. Tell me destiny doesn't exist ;)
Oh, I'm so thrilled to hear this, Cleo! Something similar happened to me more than once. 🙂
I appreciate your comment and am happy to hear where and how you found the video. 🙏
@@CSSWeekly I have to thank YOU for sharing your knowledge! 🙏 Looking forward to see more content from you 😊
Thanks so much, Cleo! 🙂
CSS is black magic so many tricks just to make some stuff that should work by default in the first place : D why make it easier when you can make it harder
Indeed. 🙂
One of the main challenges with CSS is backward compatibility. You can't just change or update an existing feature, as you might break half of the internet. So we get calc-size() even though most devs would say that calc() should just work like this. 🤷♂️
@@CSSWeekly i reckon they should
Make something like “css2” and let people option in by adding some tag to their CSS file or something.
And then they should make it just work, no weird hacks 😂
Like how hard it is to make 100% height on a div actually take 100% height of the screen without having to change body!
Or how many years we will be adding “css reset” on websites.
The current situation is a joke 😅
This suggestion sounds reasonable, Henrique. But I'm not sure it's feasible, as we don't really have clear versions of CSS since CSS3; there are just several different specs in different stages. 🤷♂️
It might be an even bigger mess if you needed to specify which version of the 'height' property you want to use. 🙂
@@CSSWeekly bring .swf back! 🍭
Oh, that'd be swell! 🙂
I used to create websites (or web experiences) in Flash / ActionScript 3.0 - it is only with jQuery that I realized we'd be able to do this natively on the web. But I never even imagined that it would be possible without JavaScript. 🤯
IMHO they should just allow auto to act like calc-size(auto) out of the box without having to write it explicitly
Yes, this would be ideal. According to the spec, calc-size() was added "for both practical and backward-compatibility reasons." 🙂
The transition looks weird
I'd prefer the Kevin Powell solution
What exactly do you mean by weird, Shawn? 🤔
Yes, Kevin's solution (I assume you're talking about CSS Grid with fr units) is the only pure CSS solution that currently works cross-browser, so it's certainly a better option right now. 🙂
What's the feature flag name ?
Thanks for your question, Felquis!
It's "Experimental Web Platform features" flag. You can find it in if you open "chrome://flags" 🙂
great tutorial.
You won a subscriber from Afghanistan.
Please pray for our country to get rid of terrorists talibans.
Thank you, Shah, and welcome to CSS Weekly! 👋
I hope you and your family are safe, that you'll always be safe, and that we, as humanity, find the strength and will to do away with violence and war once and for all. ❤️
Nice. Pretty cumbersome feature though...
Yes, ideally, it would just work with 'height: auto;' 🙂
Thanks for watching and commenting, John! 🙏
"...but not in Firefox" - no surprise there
They're actively working on it, hooray.
Thanks for sharing; I didn't know that! 🙂
Yes, unfortunately. I wouldn't be surprised if they announce that they're switching to Chromium, to be honest. 🥺
@@CSSWeeklyBoth Opera and Edge did that. It seems that it's only Firefox left.
Safari probably will never switch to the blink engine from webkit.
I highly advise you improve your pronunciation of the word “calc.” Your current pronunciation is bordering on obscene. Great information. Many thanks. Cheers.
Oh, thanks for the kind words and your advice, Robert. 🙏
I didn't realize it was that bad, but the worst part is that I already have two new videos in the final stages of edit that feature the obscene pronunciation. 😔
I'll try to improve for the next recordings, and I hope you can bear with my "calc" until then. 🙂
@@CSSWeekly Thank you for your kind response and thank you also for receiving my comment in the constructive manner that I intended. I just subscribed to make sure I don't miss your future videos. Cheers and all the best to you.
I'm thrilled to hear this, Robert! 🙏
I'm aware that I need to improve in many areas, so I take all suggestions and critiques as gifts. I'm always looking for ways to improve, and when someone points it out directly, they make my job easier. 🙂
Cock size was unexpected for me too
I’m sorry hahaha great video btw
Oh no! That's what it sounds like? 🙊😔
Moire
I'm not sure I understand what you mean. 🙂
@@CSSWeekly It's a bit distracting -- the moire effect that's visible on the shirt you're wearing ;)
Oh, ok, I understand. Thanks so much for pointing it out. 🙏
I guess it's time to get a better camera. Or at least a better shirt. 🙂