¿Cómo obtener el mismo efecto que jQuery's slideToggle usando CSS 3 transitions?

Question

Quiero el efecto jQuery slideToggle pero quiero usar transiciones CSS3 para invocar la GPU en un dispositivo iOS para que la transición sea más fluida.

Answer 1

se puede lograr esto mediante la transición height, padding 's y border-width. He aquí un ejemplo:

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

Answer 2

Creo que Animatable debería hacer el truco. Es un marco de CSS Transitions, y aunque yo no desarrollo iOS, Lea Verou menciona que lo prueba en FF y Chrome para iOS.

Hay otras bibliotecas de animación CSS, como move.js que usan transiciones CSS y javascript.

Answer 3

Lo sentimos, pero este no es compatible con CSS3 a menos que sepa la altura exacta. No hay forma de animar entre 0 y automático. Si conoce la altura exacta, puede generar algunos códigos de transición aquí: http://css3generator.com/

Answer 4

Cierto, no puede animar entre 0 y la altura automática, pero puede alternar la altura máxima.

Alterne (a través de JS) entre la altura máxima: 0 y la altura máxima: 1000 px y obtendrá el resultado logrado, aunque no será tan suave como la función slideToggle de jQuery.

Combínalo con un fundido de opacidad y se ve bastante bien. Sin embargo, sugiero solo usar esta técnica en contenedores relativamente cortos, ya que los más grandes pueden crear una animación desigual.

Answer 5

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

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