Thursday, May 3, 2012

CSS 3 equivalent to jQuery slideUp and slideDown?


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



Is it possible, using CSS 3 transitions, to change an element from display: none; to display: block; while sliding the item down or up?



Thanks!


Source: Tips4all
Post by On
Tags , , ,

2 comments:

  1. UserMay 3, 2012 at 9:10 PM

    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

    ReplyDelete
  2. UserMay 3, 2012 at 9:10 PM

    So I've gone ahead and answered my own question :)

    @True's answer regarded transforming an element to a specific height. The problem with this is I don't know the height of the element (it can fluctuate).

    I found other solutions around which used max-height as the transition but this produced a very jerky animation for me.

    Here it is (works only in WebKit browsers): http://jsfiddle.net/XUjAH/6/

    Although not purely CSS, my solution involves transitioning the height, which is determined by some JS.

    ReplyDelete

Subscribe to: Post Comments (Atom)