Tengo un div, con botones que activan funciones JS para agregar/eliminar clases de CSS al div. Entiendo que esta es una forma común de hacer animaciones simples ("transiciones"). Intente presionar los dos primeros botones, uno tras otro. El div rojo se teletransportará hacia arriba y se volverá semitransparente, luego se desvanecerá y se deslizará hacia abajo. siempre funciona
El tercer botón simplemente ejecuta el mismo código que los dos primeros botones, pero desde una función. Esperaba que tuviera el mismo efecto visible: el div saltaría inmediatamente desde el traductor y se volvería transparente, luego, durante el transcurso de 1 segundo, volvería a deslizarse a su lugar normal y se desvanecería hasta la opacidad total. Pero no es así: el botón no tiene ningún efecto visible.
¿Por qué? ¿Cómo puedo hacer que esto funcione?
Aquí está el JS, vea todo en el enlace codepen.
const div = document.getElementById('red-box') function translateUp() { div.classList.remove('no-translate'); div.classList.add('translate-up'); } function noTranslate() { div.classList.remove('translate-up'); div.classList.add('no-translate'); } //why does this function not show any transition animation? function both() { translateUp(); noTranslate(); }https://codepen.io/DMcCreepy/pen/BampPyB
No jQuery por favor :)
La razón es que las funciones se ejecutan inmediatamente una tras otra, sin tiempo para ver el efecto. La transition en CSS se refiere a cuándo se aplica la clase (podría estar relacionado con un estado de CSS como :hover ), no al cambio de clases a través de JavaScript.
Para agregar el retraso de 1 segundo en el JS, puede usar window.setTimeout :
function both() { translateUp(); window.setTimeout(noTranslate, 1000); }Confía en que el div se vuelva a representar y todas sus propiedades se vuelvan a calcular antes de cambiar la clase nuevamente con la segunda función. No estoy completamente seguro de en qué orden se hacen las cosas debajo del capó, pero estoy seguro de que no puede confiar en que construcciones como esta funcionen en general. Es cierto que cambiar de clase es una forma común de hacer animaciones y tal vez sea posible encontrar una solución como esa, pero he proporcionado una solución utilizando una animación CSS. Puede leer más sobre animaciones aquí https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
const div = document.getElementById('red-box') div.addEventListener('animationend', reset); function reset() { div.classList.remove('dropin'); } function both() { div.classList.add('dropin'); } button { display: block; } .box { height: 70px; width: 80px; font-size: 50px; background-color: red; animation-duration: 1s; animation-fill-mode: forwards; animation-name: none; } .box.dropin { animation-name: dropin; } @keyframes dropin { from { transform: translate(0, -40px); opacity: 0.1; } to { transform: translate(0, 0); opacity: 1; } } <div id="red-box" class="box">div</div> <button onclick='both()'>Do Both</button>