0

Estoy tratando de hacer una animación de transición del siguiente HTML:

<div>
    <span class="boton"></span>
        
    <div class="contenido">
        //Aquí hay contenido    
    </div>
</div>

En el js tengo lo siguiente:

jQuery( '.boton' ).click(function(event) {
    let target = jQuery(event.target);
    target.siblings().toggleClass( "active" );
});

y en el css:

.contenido {
visibility: hidden;
height: 0;      

}

.contenido.active {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    visibility: visible;
    height: auto;
}

El toggle me lo hace bien y me pone y me quita la clase .active como corresponde, pero no hace la transición animada.

El caso es que en un proyecto anterior me pasó que no me funcionaba pero porque yo le había dado una propiedad de display none/ display block al elemento que quería animar. Los compañeros me dijeron que display no era una propiedad compatible con las transiciones y me dieron esta solución, pero aquí ahora no funciona. Gracias de antemano!

1
  • height auto no se animará, deberías añadirle una altura
    – Zander
    Commented el 27 may. 2021 a las 15:08

1 respuesta 1

3

En lugar de height, puedes usar la propiedad max-height, y ponerle un valor alto cuando sea visible, y 0 cuando esté escondido.

1
  • perfecto, era eso. MUCHÍSIMAS GRACIAS. Commented el 27 may. 2021 a las 15:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.