Estoy tratando de entender el DOM a través de JS. Cuando hago clic en el botón (llamado colapsar todo, quiero que la sección de abajo se contraiga (desaparezca), pero lenta y suavemente (¿una transición?), y luego cuando hago clic de nuevo en el mismo botón, quiero que vuelva a aparecer , y así sucesivamente... ¿cómo puedo lograr esto a través de JS?
Escribí este código, pero aún no funciona repetidamente, solo funciona una vez:
btn_all.addEventListener("click", funct1); function funct1(e) { section2.style.transition = "all ease 5s"; section2.style.display = "none"; for (let i = 0; i < 100; i++) { btn_all.addEventListener("click", funct2); function funct2(e1) { section2.style.display = "block"; } }};la transicion no funciona...
display: none es instantáneo: querrá cambiar algún atributo (como la altura o la opacidad) y luego configurar display: none cuando haya terminado, y poner la transición en el estilo base.
Además, las pautas de accesibilidad (y el buen gusto) generalmente establecen que las transiciones deben ser rápidas: dar la impresión de movimiento, sin hacer que permanezcan en una animación. 250ms es una velocidad bastante buena
P.ej
.section { transition: opacity ease-in .25s; } .section.fade-out { opacity: 0; }Además, jquery tiene algunas transiciones simples que generalmente funcionan a menos que te vuelvas loco con los estilos, si está disponible. p.ej
$(".section2").fadeOut(250);Niega la necesidad de una gran cantidad de comprobaciones nulas, soluciones alternativas de compatibilidad del navegador, etc. y tiene muchos atajos fáciles. Ideal para desarrollo rápido y fácil de abordar para desarrolladores principiantes.