Estoy tratando de agregar un estilo de estado de reproducción de animación a una clase de CSS al hacer clic en el botón a través de Javascript, pero no estoy seguro de dónde lo estoy haciendo mal. Aquí esta lo que hice.
function play(){ sky.style.animation-play-state: play; sun.style.animation-play-state: play; } function pause(){ sky.style.animation-play-state: pause; sun.style.animation-play-state: pause; } playButton.onclick = play; pauseButton.onclick = pause;Pero recibo este error en mi consola.
SyntaxError no detectada: fichas inesperado ':'
Debe usar camelCase para referirse a las propiedades de estilo CSS (esto se debe a que "-" significa menos en JavaScript, por lo que todas las propiedades están asignadas a camelCase).
También debe asignar los estados con "=" en JavaScript. Estás usando ":" que es sintaxis CSS.
Los estados de reproducción de la animación también son cadenas, por lo que debe envolverlos entre comillas.
Y finalmente, los estados que desea son en realidad "ejecutando" y "pausado", no "reproduciendo" y "pausando".
Aquí hay un fragmento de trabajo de lo que está tratando de hacer:
let sun = document.querySelector("#sun"); let sky = document.querySelector("#sky"); let playButton = document.querySelector("#playButton"); let pauseButton = document.querySelector("#pauseButton"); function play(){ sky.style.animationPlayState = "running"; sun.style.animationPlayState = "running"; } function pause(){ sky.style.animationPlayState = "paused"; sun.style.animationPlayState = "paused"; } playButton.onclick = play; pauseButton.onclick = pause; #sun, #sky { padding: 10px; transform-origin: center; animation-name: rotate; animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: paused; } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } <div style="display: flex"> <div id="sun">Sun</div> <div id="sky">Sky</div> </div> <div> <button id="playButton">Play</button> <button id="pauseButton">Pause</button> </div>En lugar de usar dos funciones para reproducir y pausar, puede crear una y usar el método de alternancia de JavaScript para alternar la clase. Y puede definir el estado de animación en la clase.
Use running and paused for play and pause: function Playpause() { var pauseState = getId.style.animationPlayState === 'paused'; var runState = getId.style.animationPlayState === 'running'; varName.style.animationPlayState = runState ? 'paused':'running'; }