Is there any way to animate display: block/none
?
When clicking on div1
and div 4
- I want to animate div's 2 and 3 respectively, (perfect would be to achieve also some nice transitions), while keeping them within a flex .container
So far, i can animate visibility
and opacity
(but in this case divs '2 and '3 while not-visible, still take space within .container
) OR switch display: none
to block
(but then i lose transition
of items).
I tried positioning inner div's absolute
'ly, but then all responsiveness goes to hell...
Here's CodePen: http://codepen.io/adamTrz/pen/jWOJMj
One of the properties that cannot be animated is the display property.
In the CSS > . description section I use both display: none (required by JQuery so that the div is initially hidden) and display: flex (used to center the content nicely). But when the two are combined the last display property is read and display: none is ignored.
If you even toggle the display property from none to block , your transition on other elements will not occur. To work around this, always allow the element to be display: block , but hide the element by adjusting any of these means: Set the height to 0 . Set the opacity to 0 .
To work around this always allow the element to be display block but hide the element by adjusting any of these means: Set the height to 0. Set the opacity to 0. Position the element outside of the frame of another element that has overflow: hidden.
It is best to do that with javascript or jQuery, and instead of switching to display:none
, animate the height
(or/and width
) of the elements to 0 and then set them to display:none
.
You might be interested in this page: http://www.impressivewebs.com/animate-display-block-none/ A lot of similar solutions have been proposed in the comments.
One of the comments is a pure css solution that I think is close to what you want:
css
div {
overflow:hidden;
background:#000;
color:#fff;
height:0;
padding: 0 18px;
width:100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
}
.animated {
height:auto;
padding: 24px 18px;
}
Fiddle: http://jsfiddle.net/catharsis/n5XfG/17/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With