Soy nuevo en desarrollo web, estoy tratando de obtener una mejor comprensión de DOM.
El propósito de mi código es darle a un elemento algo de animación cuando se activa un evento de clic. Esto es lo que probé:
Código:
const svg = document.getElementById('svg'); const button = document.getElementById('button'); button.onclick = function() { svg.style.animation = 'svg-color 5s linear 1 1s'; } svg { background-color: lightcyan; } @keyframes svg-color { 0% { background-color: lightcyan; } 50% { background-color: skyblue; } 100% { background-color: steelblue; } } <svg id="svg" width="300" height="300"></svg> <button id="button">button</button>Funciona en el evento del primer clic. Pero cuando vuelvo a hacer clic en el botón, la animación no vuelve a ejecutarse.
¿Este problema se debe a DOM o al hecho de que configuré el recuento de iteraciones de animación como 1 en CSS?
Y si configuro el recuento de iteraciones de animación como infinito, ¿hay alguna manera de hacer que la animación vuelva a su estado inicial y se reproduzca nuevamente en el evento de clic?
No sucede nada si asigna un estilo que ya está establecido en el elemento.
Debe eliminar el estilo cuando finalice la animación. De esa forma, el estilo será nuevo la próxima vez que haga clic.
const svg = document.getElementById('svg'); const button = document.getElementById('button'); button.onclick = function() { svg.style.animation = 'svg-color 5s linear 1 1s'; } svg.addEventListener("animationend", (e) => e.target.style.animation = ''); svg { background-color: lightcyan; } @keyframes svg-color { 0% { background-color: lightcyan; } 50% { background-color: skyblue; } 100% { background-color: steelblue; } } <svg id="svg" width="300" height="300"></svg> <button id="button">button</button>