I will make a minimal example:
input, div { display: none; } label:before { content: 'Показать'; } #toggle:checked + label:before { content: 'Скрыть'; } #toggle:checked ~ div { display: block; }
<input type="checkbox" name="toggle" id="toggle" /> <label for="toggle"></label> <div>Скрытый контент</div>
The question is about display: none
, so there is no way to offer transparency and zero-height methods instead of this property. An animation can of course contain opacity
, height
, width
, transform
and other styles. With the help of JS, especially with the help of jQuery, this is also easily implemented, but the question is exactly the CSS.
If not, share what you use and why? For example, when hiding and displaying detailed information or text cropping.
display
property cannot be animated, it is not numeric, how do you imagine its animation? And all the smooth hiding, including "using JS, especially using jQuery" just happen through the animation of transparency, height, etc. and installationdisplay: none
at the end of the animation - Vadim Leshkevichkeyframes
. By the way, I didn’t offer to animate the property itself, that it works like a "toggle switch" everyone knows perfectly well. I was more interested in implementation ideas. - Alexey GiryayevВопрос именно про display: none, поэтому способы прозрачности и нулевой высоты не предлагать.
? Usingkeyframes
or js doesn’t matter, the point is that the numerical value of transparency, size or position is still animated. And, ifто, что оно работает как "тумблер" все прекрасно знают
- what then is the question? - Vadim Leshkevichdisplay: none
, since almost all decisions of a detailed kind are to remove the display and hide it with the help ofopacity
andheight
, to which the animation is screwed without much difficulty. The question is how to make a smooth appearance when the element has a switch fromdisplay: none
todisplay: block
. - Alexey Giryayev