Mike Mike - 5 months ago 45
Javascript Question

CSS3 equivalent to jQuery slideUp and slideDown?

My application is performing poorly with jQuery's slideDown and slideUp. I'm looking to use a CSS3 equivalent in browsers which support it.

Is it possible, using CSS3 transitions, to change an element from

display: none;
to
display: block;
while sliding the item down or up?

TNC TNC
Answer

You could do something like this:

#youritem .fade.in {
    -webkit-animation-name: fadeIn;
}

#youritem .fade.out {
    -webkit-animation-name: fadeOut;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(endYposition);
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        -webkit-transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        -webkit-transform: translateY(endYposition);
    }
}

Example - Slide and Fade:

This slides and animates the opacity - not based on height of the container, but on the top/coordinate. View example

Example - Auto-height/No Javascript: Here is a live sample, not needing height - dealing with automatic height and no javascript.
View example