[英]How to stop and start animation using Javascript?
我試圖通過使用香草 Javascript 來阻止這個 animation。 我嘗試使用 classList.remove 屬性，但沒有成功。 當我打開 Chrome 開發工具時，它說它無法讀取未定義的屬性刪除。 我不明白它在說什么。 有沒有辦法用香草JS刪除animation，有人可以展示解決方案嗎？
const circle = document.getElementsByClassName('circle') const red = document.getElementsByClassName('red') const blue = document.getElementsByClassName('blue') const yellow = document.getElementsByClassName('yellow') const green = document.getElementsByClassName('green') const button = document.getElementById('btn') button.addEventListener('click', function() { circle.classList.remove('red'); circle.classList.remove('blue'); circle.classList.remove('yellow'); circle.classList.remove('green'); })
* { box-sizing: border-box; } body { background: rgb(25, 21, 26); display: flex; flex-direction: column; min-height: 100vh; margin: 0; overflow: hidden; }.utilities { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 1rem; display: flex; justify-content: center; align-items: center; }.utilities button { height: 50px; width: 100px; background: none; color: white; outline: none; border: 2px solid rgb(184, 134, 222); border-radius: 25px; } button:hover { background: rgb(184, 134, 222); cursor: pointer; transition: 0.5s ease; }.main { background:rgb(57, 53, 75); border-radius: 25px; height: 20vh; width: 100vw; display: flex; justify-content: center; align-items: center; }.circle { display: flex; margin: 1rem; border-radius: 50%; height: 50px; width: 50px; background: rgba(0,0,0,0.3); position: relative; transition: 1s all ease; }.circle:before { position: absolute; content: ''; height: 15px; width: 15px; left: 17.5px; top: -15px; margin: 0; padding: 0; display: block; background: rgb(68, 53, 73); border-radius: 2px; display:inline-block; border-bottom: 2px solid rgb(97, 81, 107); }.circle:after{ position: absolute; content: ""; top: -20px; left: 30px; position: absolute; width: 70px; height: 18.6666666667px; border-bottom: solid #222 2px; border-radius: 50%; }.circle:last-child::after{ content: ''; position: absolute; border: none; }.red { background-color: #c0392b; animation: glow-1 2s infinite; }.yellow { background-color: #f1c40f; animation: glow-2 2s infinite; }.blue { background-color: #64fcfe; animation: glow-3 2s infinite; }.green { background-color: #2ecc71; animation: glow-4 2s infinite; } @keyframes glow-1 { 0%, 100% { box-shadow: 0 0 20px 5px #c0392b; } 50% { box-shadow: none; } } @keyframes glow-2 { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 20px 5px #f1c40f; } } @keyframes glow-3 { 0%, 100% { box-shadow: 0 0 20px 5px #74f7e1; } 50% { box-shadow: none; } } @keyframes glow-4 { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 20px 5px #2ecc71; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>RayaLights</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="circle red"></div> <div class="circle yellow"></div> <div class="circle blue"></div> <div class="circle green"></div> <div class="circle red"></div> <div class="circle yellow"></div> <div class="circle blue"></div> <div class="circle green"></div> </div> <div class="utilities"> <button id="btn">Stop</button> </div> <script src="app.js" charset="utf-8"></script> </body> </html> circle變量指的是舊版本中的HTMLCollection或nodeList 。 不幸的是，您不能對 vanilla JavaScript 中的所有集合應用單個操作。
您可以做的是將集合轉換為數組，然后對其進行循環。
const circle = document.getElementsByClassName('circle')
...
const button = document.getElementById('btn')
button.addEventListener('click', function() {
Array.from(circle).forEach((c) => {
c.classList.remove('red');
c.classList.remove('blue');
c.classList.remove('yellow');
c.classList.remove('green');
});
});
請注意，這將完全移除 colors，使燈泡空着。
如果您只需要移除輝光 animation，您會想要使用c.styles.animation = none;
const circle = document.getElementsByClassName('circle') const pause = document.getElementById('pause') const play = document.getElementById('play') const stop = document.getElementById('stop') var len = circle.length; pause.addEventListener('click', function() { for (var i = 0; i < len; i++) { circle[i].style.animationPlayState = "paused"; circle[i].style.WebkitAnimationPlayState = "paused"; } }) play.addEventListener('click', function() { for (var i = 0; i < len; i++) { circle[i].removeAttribute("style"); circle[i].style.animationPlayState = "running"; circle[i].style.WebkitAnimationPlayState = "running"; } }) stop.addEventListener('click', function() { for (var i = 0; i < len; i++) { circle[i].style.animation = "none"; } })
* { box-sizing: border-box; } body { background: rgb(25, 21, 26); display: flex; flex-direction: column; min-height: 100vh; margin: 0; overflow: hidden; }.utilities { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 1rem; display: flex; justify-content: center; align-items: center; }.utilities button { height: 50px; width: 100px; background: none; color: white; outline: none; border: 2px solid rgb(184, 134, 222); border-radius: 25px; margin: 0 12px; } button:hover { background: rgb(184, 134, 222); cursor: pointer; transition: 0.5s ease; }.main { background: rgb(57, 53, 75); border-radius: 25px; height: 20vh; width: 100vw; display: flex; justify-content: center; align-items: center; }.circle { display: flex; margin: 1rem; border-radius: 50%; height: 50px; width: 50px; background: rgba(0, 0, 0, 0.3); position: relative; transition: 1s all ease; }.circle:before { position: absolute; content: ''; height: 15px; width: 15px; left: 17.5px; top: -15px; margin: 0; padding: 0; display: block; background: rgb(68, 53, 73); border-radius: 2px; display: inline-block; border-bottom: 2px solid rgb(97, 81, 107); }.circle:after { position: absolute; content: ""; top: -20px; left: 30px; position: absolute; width: 70px; height: 18.6666666667px; border-bottom: solid #222 2px; border-radius: 50%; }.circle:last-child::after { content: ''; position: absolute; border: none; }.red { background-color: #c0392b; animation: glow-1 2s infinite; }.yellow { background-color: #f1c40f; animation: glow-2 2s infinite; }.blue { background-color: #64fcfe; animation: glow-3 2s infinite; }.green { background-color: #2ecc71; animation: glow-4 2s infinite; } @keyframes glow-1 { 0%, 100% { box-shadow: 0 0 20px 5px #c0392b; } 50% { box-shadow: none; } } @keyframes glow-2 { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 20px 5px #f1c40f; } } @keyframes glow-3 { 0%, 100% { box-shadow: 0 0 20px 5px #74f7e1; } 50% { box-shadow: none; } } @keyframes glow-4 { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 20px 5px #2ecc71; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>RayaLights</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="circle red"></div> <div class="circle yellow"></div> <div class="circle blue"></div> <div class="circle green"></div> <div class="circle red"></div> <div class="circle yellow"></div> <div class="circle blue"></div> <div class="circle green"></div> </div> <div class="utilities"> <button id="pause">Pause</button> <button id="play">Play</button> <button id="stop">Stop</button> </div> </body> </html>
將您的 addEventListener function 更改為：
button.addEventListener('click', function() {
Array.prototype.forEach.call(circle, function(el) {
el.style.animation = "none";
});
})
如何在使用Javascript的控制台中調用start（）和stop（）時啟動和停止多步動畫？
[英]How to start and stop a multistep animation while calling start() and stop() in the console using Javascript?
Webkit動畫播放狀態：如何使用javascript按需啟動/停止動畫
[英]webkit animation play state: how to start/stop animation on demand with javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.