CODEWITHSUNDEEP
javascriptcssanimation
Caspert
Caspert

Reputation: 4363

How to animate display table to none or zero height?

I am trying to animate a header, when the class collapseTest is added to the header. I came up with the following: http://jsfiddle.net/robertrozas/atuyLtL0/1/ Thanks to @Hackerman for helping me out with the working one.

What I want is when the class collapseTest is added to the header, the white div with the class .top should disappear. Since I use display: table instead of display: block, I can't hide the div including the content with the CSS rule display: none. The content does not disappear.

I use the following animation, that is working for display: block, but not for table.

@-webkit-keyframes pushDown {
    0% {
        height: 50%;
        display: table;
    }
    100% {
        height: 0;
        display: none;
    }
}

I call this one on the div with the class top:

#header.collapse .top {
    -webkit-animation: pushDown 2s forwards linear;
}

But this isn't working as expected. Does anyone know what I am doing wrong, why the div with the class top isn't animating to hidden?

Upvotes: 0

Views: 311

Answers (1)

Anthony Hilyard
Anthony Hilyard

Reputation: 1250

You need to apply styles to #header .top and its children. Something like this:

#header.collapseTest .top {
    height: 0;
    opacity: 0;
    margin-top: -20px;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

#header.collapseTest .top * {
    opacity: 0;
    height: 0;    
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.8s ease-in-out 0s;
    -moz-transition: all 0.8s ease-in-out 0s;
    -o-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

Parsing the CSS in your fiddle was difficult, as it appears there is a lot more than is needed for an example of the problem. Nevertheless, I created the following fiddle with my code changes: http://jsfiddle.net/pbukcne4/

Upvotes: 1

Related Questions