Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 393
adamTrz Avatar asked Dec 17 '15 14:12

adamTrz


People also ask

Can you animate the display property?

One of the properties that cannot be animated is the display property.

How do you use display none and Flex?

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.

How do you change the transition on display none?

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 .

How do you add transitions to display blocks?

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.


1 Answers

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/

like image 198
Bas van Stein Avatar answered Oct 14 '22 18:10

Bas van Stein