Display none => block transition example
Anyone able to post a super simple demo of transitioning between display: none and display: block with the new discrete transition stuff?
I've been messing about with it but can't seem to get anything working.
Thanks
20 Replies
kevin should have a video about it, from last year
I've looked for videos, but just looking for a small demo codepen.
My current code is:
.memory-transcription {
width: 100%;
display: none;
transition: all 0.25s;
transition-behavior: allow-discrete;
&.visible {
display: block;
}
}
you didnt add a timing function, you are transitioning everything and you are using linear easing
so, what will happen is that EVERYTHING will transition for 0.25s, then it should show
Ok, so I updated it to this and it still makes no difference:
.memory-transcription {
width: 100%;
display: none;
transition: display 0.25s ease-in-out;
transition-behavior: allow-discrete;
&.visible {
display: block;
}
}
does it show?
can you make an example in codepen or jsfiddle?
It shows and hides, but doesn't transition
that is the transition
try setting the animation time to 5 seconds
and it should take 5 seconds to show
It makes no difference
then can you make the example, please?
I am creating one as we speak
Hang fire
Ok, it does seem to be doing something, although it's not transitioning smoothly
it wont
ever
it's a discrete property
it goes from none to block
there is no half-display
either it displays or not
I thought the whole point of allow-discrete was to transition those though?
yes, and they are transitioning
but there is nothing between display: block and none
it jumps from none to block
what you can do is to set display block and then transition the opacity and height, from 0 to auto
the opacity from 0 to 1
Ok. Thankyou
you might want to play with animations instead
like, swapping a class or an attribute and using an animation for it
you might want to use it as
opacity:0; there is another way you can make it not take up the space. but if you have it taken up the space in that way it wont change the layout of the pageCSS Weekly
YouTube
Animate to "height: auto;" & "display: none;" Using CSS Transitions
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 on...
Kevin Powell
YouTube
We can now transition to and from display: none
Start writing CSS with confidence 👉 https://cssdemystified.com/?utm_campaign=general&utm_source=youtube&utm_medium=transitiondisplay
🔗 Links
✅ Great article from Chrome for Developers blog on this : https://developer.chrome.com/blog/entry-exit-animations
✅ Open Web Docs: https://openwebdocs.org/
⌚ Timestamps
00:00 - Introduction
00:40 - Using ...
KPow videos usually have a linked codepen in description