Tengo un conjunto de casillas de verificación personalizadas a las que estoy aplicando una animación de Animejs al hacer clic. Pensé que esta era la única forma de hacer que la animación funcionara para cada casilla de verificación sin tener que agregar manualmente detectores de eventos a cada casilla de verificación.
Sin embargo, tengo algunos problemas para descubrir cómo revertir las animaciones.
Como referencia, aquí hay un codepen de lo que estoy trabajando hasta ahora:
https://codepen.io/osaisus/pen/BaJWvPv
HTML:
<p>How can I get the animations to reverse on second click?</p> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>CSS:
.container { display: flex; align-items: center; } .box, .box2 { border: 1px solid black; padding: 10px; margin: 1rem 1rem; }JS:
const checkbox = document.querySelectorAll(".box"); checkbox.forEach(item => { item.addEventListener("click", (e) => { e.preventDefault(); anime({ targets: item, duration: 200, easing: "easeInOutQuint", borderRadius: [3, 50], backgroundColor: "#ffd54f", borderColor: ["#212529", "#ffd54f"], }); }) })Hay muchas otras publicaciones sobre cómo revertir animaciones en elementos ÚNICOS, pero ninguno de los métodos (hasta donde lo he probado) funciona cuando se aplica la animación a un conjunto de elementos como lo que se hizo arriba.
¡Cualquier ayuda es muy apreciada!
No toma demasiado. No tiene que hacerlo como lo hice aquí, solo mantenga un registro de dónde ha estado accesible para su controlador de eventos.
const checkbox = document.querySelectorAll(".box"); checkbox.forEach(item => { let props = { borderRadius: [3, 50], backgroundColor: ["rgba(255, 255, 255, 0)", "#ffd54f"], borderColor: ["#212529", "#ffd54f"], }; item.addEventListener("click", (e) => { e.preventDefault(); anime({ targets: item, duration: 200, easing: "easeInOutQuint", ...props }); for (i in props) { props[i].reverse(); } }) })