CSS no puede hacer una transición de display: none a display: block para eso, estoy tratando de hacerlo usando javascript. No quiero usar visibility: hidden y height: 0 o transform: scale(0)
para eso estoy usando javascript para hacer una transición de display: none a display: block
El siguiente código funciona cuando agrego la clase active , la transición funciona bien, pero cuando elimino la clase active , la transición no funciona
¿Cómo puedo hacer que la transición funcione tanto cuando agrego como cuando elimino la clase activa usando javascript y css?
let parents = document.querySelectorAll('.parent'); parents.forEach(p => { p.addEventListener("click",() => { if(p.classList.contains('active')){ setTimeout(function () { p.nextElementSibling.classList.remove("visually"); }, 20); p.classList.remove("active"); }else{ p.classList.add("active"); setTimeout(function () { p.nextElementSibling.classList.add('visually'); }, 20); } }); }); .link-inner { cursor: pointer; } .toggle { opacity: 0; display: none; transition: all .5s ease-in-out; } .parent.active+.toggle { display: block; } .parent.active+.visually { opacity: 1; } <div class="link"> <div class="link-inner parent"> <div class="linkText"> <h4>Title</h4> </div> </div> <div class="linkInfo toggle "> <a href="#" target="_blank">link 1</a> </div> </div> <div class="link"> <div class="link-inner parent"> <div class="linkText"> <h4>Title</h4> </div> </div> <div class="linkInfo toggle "> <a href="#" target="_blank">link 2</a> </div> </div>En realidad estabas casi allí. Solo tenía que intercambiar las llamadas al eliminar clases y agregar un poco más de retraso en su setTimeout
let parents = document.querySelectorAll('.parent'); parents.forEach(p => { p.addEventListener("click",() => { if(p.classList.contains('active')){ // remove the class that sets opacity so it fades away p.nextElementSibling.classList.remove("visually"); setTimeout(function () { // remove the class that sets display: block after the opacity is gone p.classList.remove("active"); }, 500); } else { p.classList.add("active"); setTimeout( function () { p.nextElementSibling.classList.add('visually'); }, 20 ); } }); });