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!