web-dev-qa-db-fra.com

Comment obtenir le même effet que jQuery slideToggle en utilisant les transitions CSS3?

Je souhaite utiliser l'effet slideToggle de jQuery, mais utiliser des transitions CSS3 pour appeler le GPU sur un périphérique iOS afin que la transition soit plus fluide.

jquerycssmobilecss3
20
sevens

Vous pouvez y parvenir en effectuant la transition de height, padding 's et border-width. Voici un exemple:

$('.run-css').click(function() {
    $('.cont').toggleClass('toggled');
});
.cont {
    width: 100px;
    height: 100px;
    border: 1px #CCC solid;
    background-color: #EEE;
    padding: 5px;
    -webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;
    transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;
}
.toggled {
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    height: 0;
    border-width: 0 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<button class="run-css">CSS slideToggle</button>

<div class="cont">Toggle this div</div>

20
dfsq

Désolé, cela n’est pas supporté par CSS3 sauf si vous connaissez la hauteur exacte. Il n'y a aucun moyen d'animer entre 0 et auto. Si vous connaissez la hauteur exacte, vous pouvez générer des codes de transition ici: http://css3generator.com/

13
TelFiRE

Certes, vous ne pouvez pas animer entre 0 et la hauteur automatique, mais vous pouvez en fait basculer la hauteur maximale.

Basculez (via JS) entre max-height:0 et max-height:1000px et vous obtiendrez le résultat obtenu, bien que cela ne soit pas aussi fluide que la fonction slideToggle de jQuery.

Associez-le à un fondu d'opacité et ça a l'air bien. Je suggère toutefois de n'utiliser cette technique que sur des conteneurs relativement courts, car les plus grands peuvent créer une animation saccadée.

4
Carson
.container {
    overflow-y: hidden;
    max-height: 0;

    transition: max-height 0.5s ease;
}
.container.open {
    max-height: 1000px; /* approx */
}
3
John F

Je crois Animatable devrait faire l'affaire. C'est un framework de transitions CSS, et bien que je ne fasse pas de développement iOS, Lea Verou mentionne qu'elle le teste sur FF et Chrome pour iOS. 

Il existe d'autres bibliothèques d'animation CSS, comme move.js , qui utilisent des transitions CSS et javascript. 

0
David Hobs