CSS3 équivalent à jQuery slideUp et slideDown?

Question

Mon application se comporte mal avec jQuery slideDown et slideUp. Je suis à la recherche d'utiliser un CSS3 équivalent dans les navigateurs qui le supportent.

Est-il possible, à l'aide de transitions CSS3, pour modifier un élément d' display: none; de display: block; tout en faisant glisser l'élément vers le bas ou vers le haut?

Answer 1

Vous pourriez faire quelque chose comme ceci:

#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);
    }
}

Exemple - Glisser et Fade:

Cette diapositives et anime l'opacité - pas en fonction de la taille du conteneur, mais sur le haut/coordonner. Voir exemple

Exemple - Auto-hauteur/Pas de Javascript: Ici est un sample, pas besoin de la hauteur, en traitant avec automatique de la hauteur et pas de javascript.
Voir exemple

Answer 2

J'ai changé votre solution, de sorte qu'il fonctionne dans tous les navigateurs modernes:

bout de code css:

-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;

js extrait:

    var clone = $('#this').clone()
                .css({'position':'absolute','visibility':'hidden','height':'auto'})
                .addClass('slideClone')
                .appendTo('body');

    var newHeight = $(".slideClone").height();
    $(".slideClone").remove();
    $('#this').css('height',newHeight + 'px');

voici l'exemple complet http://jsfiddle.net/RHPQd/

Answer 3

J'ai donc pris de l'avance et d'avoir répondu à ma propre question :)

@Vraie réponse de considérer la transformation d'un élément à une hauteur spécifique. Le problème, c'est que je ne connais pas la hauteur de l'élément (cela peut varier).

J'ai trouvé d'autres solutions autour de laquelle utilisés max-hauteur de la transition", mais cela a produit un très saccadée de l'animation pour moi.

Ici, il est (fonctionne uniquement dans les navigateurs WebKit): http://jsfiddle.net/XUjAH/6/

Bien que n'étant pas purement CSS, ma solution implique la transition de la hauteur, ce qui est déterminé par un peu de JS.

Answer 4

pourquoi ne pas profiter des navigateurs modernes transition css et rendre les choses plus simple et rapide à l'aide de plus de css et de moins de jquery

Voici le code pour déplacer vers le haut ou vers le bas

Voici le code pour faire glisser de gauche à droite

De même, nous pouvons changer le glissement de haut en bas ou de droite à gauche en changeant de transformer l'origine et de la transformer: scaleX(0) ou transformer: scaleY(0) de manière appropriée.

Answer 5

Je vous conseille d'utiliser le jQuery de Transit Plugin qui utilise le CSS3 propriété transform, qui fonctionne très bien sur les appareils mobiles en raison du fait que la plupart de support de l'accélération matérielle pour donner une interface native.

JS Fiddle Exemple

HTML:

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

Javascript:

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});