it-swarm.com.de

Wie kann ich mithilfe von CSS3-Übergängen denselben Effekt wie mit jQuery slideToggle erzielen?

Ich möchte den jQuery slideToggle-Effekt, möchte aber CSS3-Übergänge verwenden, um die GPU auf einem iOS-Gerät aufzurufen, damit der Übergang reibungsloser verläuft.

20
sevens

Sie können dies erreichen, indem Sie height, padding und border-width wechseln. Hier ist ein Beispiel:

$('.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

Leider wird dies von CSS3 nicht unterstützt, es sei denn, Sie kennen die genaue Höhe. Es gibt keine Möglichkeit, zwischen 0 und Auto zu animieren. Wenn Sie die genaue Höhe kennen, können Sie hier einige Übergangscodes generieren: http://css3generator.com/

13
TelFiRE

Sie können zwar nicht zwischen 0 und automatischer Höhe animieren, aber Sie können die maximale Höhe tatsächlich umschalten.

Schalten Sie (über JS) zwischen max-height:0 und max-height:1000px um, und Sie erhalten das erzielte Ergebnis, obwohl es nicht ganz so reibungslos wie die SlideToggle-Funktion von jQuery ist.

Kombinieren Sie es mit einer Deckkraftschwelle und es sieht ziemlich gut aus. Ich empfehle jedoch, diese Technik nur für relativ kurze Container zu verwenden, da die großen eine ruckartige Animation erzeugen können.

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

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

Ich glaube, Animatable sollte den Trick tun. Es ist ein CSS-Transitions-Framework, und obwohl ich keine iOS-Entwicklung mache, erwähnt Lea Verou, dass sie es auf FF und Chrome für iOS getestet hat. 

Es gibt andere CSS-Animationsbibliotheken wie move.js , die CSS-Übergänge und Javascript verwenden. 

0
David Hobs