爲什麼我們需要在JavaScript中多次運行時清除動畫？

昨天我問了一個問題（original question），這個問題很快得到了回答，但即使找到了解決方案，我也不明白爲什麼這樣工作。我可以複製這個解決方案，用於我需要做的其他事情，但在繼續之前，我想了解爲什麼它按照它的方式工作。爲什麼我們需要在JavaScript中多次運行時清除動畫？

所以基本上我做了三個互相調用的函數。第一個在「animationend」中調用第二個，第二個在「animationend」中調用第三個，最後第三個函數稱爲第一個重新開始循環 - 但我的原始代碼雖然缺乏;

document.getElementById("rightBoxTwo").style.animation = "none";

第三個函數需要按順序調用第一個函數，以便循環重新開始。如果在每個函數中沒有上面的代碼，那麼這三個函數只能工作一次，然後停止。 StackOverFlow用戶的答案; ScientiaEtVeritas給我包括一個CodePen其中有我需要的工作示例和簡要說明

所以，我認爲有以下幾個選項：什麼可以工作，是你重置rightBox的動畫在功能runTwo與 animation: none。如果您將scrollTextTwo 10s指定回 rightBox它應該重新開始。等同於其他人。

因此，最後我的問題是爲什麼動畫需要清除，爲什麼.style.animation = "none";完成這個？

下面是一個解決方案後，工作代碼，提出...

<body onload="runOne()">

function runOne() { 
    var x = document.getElementById("rightBox"); 
    x.addEventListener("animationend",runTwo); 
    document.getElementById("rightBox").style.animation = "scrollTextTwo 10s"; 
    document.getElementById("rightBoxTwo").style.animation = "none"; 
} 
function runTwo() { 
    var x = document.getElementById("rightBoxTwo"); 
    x.addEventListener("animationend",runThree); 
    document.getElementById("rightBoxTwo").style.animation = 
    "scrollTextTwo 10s"; 
    document.getElementById("rightBoxThree").style.animation = "none"; 
} 
function runThree() { 
    var x = document.getElementById("rightBoxThree"); 
    x.addEventListener("animationend",runOne); 
    document.getElementById("rightBoxThree").style.animation = 
    "scrollTextTwo 10s"; 
    document.getElementById("rightBox").style.animation = "none"; 
}

來源

2016-08-05 Ghoyos

這就像開燈。它的開關已經處於開啓狀態;您需要將其關閉，然後才能再次打開。 – Malk

這就像填充一杯水。如果杯子已滿，您需要先清空杯子，然後才能再次裝滿杯子。 – blex

最簡單的原因是因爲在同步方式，如設置動畫以同樣的事情兩次（或多次）一個for循環是一樣的做一次：

let box = document.getElementById('box'); 
 

 
// animation happens once 
 
for (let i = 0; i < 5; i++) { 
 
    box.style.animation = 'fade .5s'; 
 
}

@keyframes fade { 
 
    from { 
 
    opacity: 1 
 
    } 
 
    to { 
 
    opacity: 0 
 
    } 
 
} 
 
#box { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 50px; 
 
    background: #018bbc; 
 
}

<div id="box"></div>

的行爲是一樣的，即使你耽誤動畫所以每個之後可能運行時間渲染：

let box = document.getElementById('box'); 
 

 
// animation still happens once 
 
for (let i = 0; i < 5; i++) { 
 
    setTimeout(function() { 
 
    box.style.animation = 'fade .5s'; 
 
    }, i * 1000); 
 
}

@keyframes fade { 
 
    from { 
 
    opacity: 1 
 
    } 
 
    to { 
 
    opacity: 0 
 
    } 
 
} 
 
#box { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 50px; 
 
    background: #018bbc; 
 
}

<div id="box"></div>

但如果我重置每一步之前，動畫，發動機必須重新設置動畫，這在某種程度上意味着「再次安裝動畫」，這意味着它將再次生成動畫：

let box = document.getElementById('box'); 
 

 
box.addEventListener('animationend', function() { 
 
    box.style.animation = 'none'; 
 
}); 
 

 
// animation now happens every time 
 
for (let i = 0; i < 5; i++) { 
 
    setTimeout(function() { 
 
    box.style.animation = 'fade .5s'; 
 
    }, i * 1000); 
 
}

@keyframes fade { 
 
    from { 
 
    opacity: 1 
 
    } 
 
    to { 
 
    opacity: 0 
 
    } 
 
} 
 
#box { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 50px; 
 
    background: #018bbc; 
 
}

<div id="box"></div>

來源

2016-08-05 17:37:41 nem035

哦，你說的是這個功能是「安裝」動畫到頁面上。但它的動畫是基於CSS或其他代碼取決於我的時間量？所以我做的方式不是正確的方式多次運行它？ – Ghoyos

嗯，是的，你可以控制一些東西動畫與JS，也只有CSS，如[@Malk在他的答案中顯示]（http://stackoverflow.com/a/38795001/3928341）。至於什麼是正確的方式，使用CSS最有可能是一個更好的選擇，因爲瀏覽器可以執行沒有錯誤（或者至少少得多）的動畫，並且比你自己編寫代碼的速度更快。 – nem035

謝謝你，先生，是的，馬爾克的回答非常有趣。這需要我做很多實驗，但是你給出了最一致的答案，我爲此感謝你！在你和馬爾克說我現在感覺得到更多的權力之間，我想創造一些複雜的動畫，所以這個基本的理解有點讓我反感。它很難找到的在線教程，只是不默認設置動畫的間隔/ settimout，在即時通訊設法完成，而不使用setinterval/settimout的方式。 – Ghoyos

你真的不需要JavaScript來做這樣的事情。關鍵幀可讓您按完成百分比定義樣式。使用您可以時間2個動畫了類似的結果：

@keyframes progress { 
 
    0% { width: 0px;} 
 
    50% { width: 600px;} 
 
    100% {width: 600px;} 
 
} 
 
@keyframes progress2 { 
 
    0% { width: 600px;} 
 
    49% { width:600px;} 
 
    50% { width: 0px;} 
 
    100% {width: 600px;} 
 
} 
 
div { 
 
    width:600px; 
 
    height:50px; 
 
    background-color:black; 
 
} 
 
#rightBox { 
 
    animation: progress 4s infinite; 
 
} 
 
#rightBoxTwo { 
 
    animation: progress2 4s infinite; 
 
}

<div id="rightBox"></div> 
 
<div id="rightBoxTwo"></div>

來源

2016-08-05 17:39:53 Malk

哦哇很有趣，動畫很流暢，但是你在css中使用了時間無限地運行來區別動畫。這將幫助我試圖做什麼 – Ghoyos

爲什麼我們需要在JavaScript中多次運行時清除動畫？

回答

相關問題