the easiest way to make a transition on display css ?
Hi there,
(i just found this cool (experimental) solution to creat transition between display block/none :
https://codepen.io/VictorUx/pen/xxeRKqg
But this rule only available mainly on chrome. And it doesn't work well with className, when you remove the .active)
For now, i would like to find the easiest solution to do this in pure css transition.
In that case i was thinking of apply a simple keyframe with Opacity + scale 0 to 1.
But if i want to do this with a content accordion i guess it's bad for SEO to Force a small size on text not really hidden right ?
any idea ?
thx
8 Replies
the easiest way to do transition display property as far as ik is not not transitioning display property at all, rather making the illusion of it
u use transition the opacity and set the position to absolute so it doesn't have any effect on the layout, followed by either pointer events to none or giving low z index so it doesn't effect any interactions
@tok124 (CSS Nerd) hey, a few days ago u made a similar codepen right? can u share it here
I have done something using this method before, i got it somewhere on codepen but since i have around 5000 pens or so, it's like finding a needle in a haystack ^^ At it was not really a recent project.
Not totally what you're looking for but this article is about transitioning a popover display property
Adam's Indie Social Feed
Steal this popover code · March 15, 2024
Website for Adam Argyle: Teacher, Speaker, CSSWG member, and creator of Open Props and VisBug.
yeah i guess it's the only way, using illusion
Nice post, this is what I did in my codepen link above, the problem with that is that's not yet deployed and there is no alternative, except for the transition "allow-discrete", linear work well
that's cool but not what i mean.
i would like to animate display element for popup, acccordion, dropdown.. basics elements.
but apparently there is still no proper possibility to do it in pure css. except my codepen above with @starting-style
fair xD
Popover is not yet supported globally but I was mostly linking to show you how they transition it’s display property with allow-discrete. Same as transitioning a dialog element, I think KPow has a video on how to give it a class to animate it out then once that animation ends , remove that bridge class and set it to display none.