How can i animate display: none / block property on flex items?

Question

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

Solution

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/

Comments

[adamTrz]

thanks, totally forgot that one can animate width and height :)

[Pratap A.K]

excellent answer