Estoy tratando de pausar una animación CSS con un clic en el botón HTML, usando JS para llevar a cabo la pausa. Hasta ahora, he intentado cambiar el estado de la animación usando JS, pero no funciona: la animación se reproduce y el botón parece no tener efecto.
Aquí está mi fragmento de JS:
var sun = document.getElementById("sun"); var sky = document.getElementById("sky"); var pauseBtn = document.getElementById("pauseBtn"); function pauseAnimation(){ if((pauseBtn.clicked) == true){ sun.style.animationPlayState("paused"); sky.style.animationPlayState("paused"); } } h2:after { content : ' no css!'; color : red; } <h2>no HTML</h2>Puede compartir más código si es necesario, ¿algún consejo basado en lo que ve con el JS?
Por aquí
const sun = document.querySelector('#sun') , btPP = document.querySelector('#PlayPause') ; btPP.onclick = () => { btPP.textContent = sun.classList.toggle('pause') ? 'Play' : 'Pause' } article { margin:1em; } #sun{ background-color : orange; color : #fff; margin : auto; margin-left : auto; margin-left : 0; border : 5px dotted yellow; width : 100px; height : 100px; border-radius : 50%; } .pause { animation-play-state: paused; } .animating { animation-name : slide; animation-duration : 3s; animation-timing-function : ease-in; animation-iteration-count : infinite; animation-direction : alternate; } @keyframes slide { from { margin-left : 0 } to { margin-left : 80% } } <article> <div id="sun" class="animating"></div> </article> <button id="PlayPause"> Pause</button>Puede agregar o eliminar un nombre de clase en el que defina la animación CSS cuando desee pausar o reanudar la animación.
<style> .sky-animation-class-name { animation: /* animation properties */; } .sun-animation-class-name { animation: /* animation properties */; } </style> <body> <div id="sky" class="sky-animation-class-name"></div> <div id="sun" class="sun-animation-class-name"></div> </body> <script> var sky = document.getElementById("sky"); var sun = document.getElementById("sun"); var pauseBtn = document.getElementById("pauseBtn"); var resumeBtn = document.getElementById("resumeBtn"); function pauseAnimation(){ if((pauseBtn.clicked) == true){ sky.classList.remove("sky-animation-class-name"); sun.classList.remove("sun-animation-class-name"); } } function resumeAnimation(){ if((resumeBtn.clicked) == true){ sky.classList.add("sky-animation-class-name"); sun.classList.add("sun-animation-class-name"); } } </script>