每次“單擊”時使背景淡入

Question

我希望DIV會顯示一條確認消息，其中每次單擊都會激活css效果“動畫”或“淡出”。 第一次點擊時效果很好，但隨后的點擊效果不佳。

 function clientedetail() { document.getElementById("guardadoC").innerHTML = "Guardado."; document.getElementById("guardadoC").style.cssText = "animation: background-fade 3s;padding:5px;"; } 

 @keyframes background-fade { 0% { background-color: green; } 100% { background-color: none; } } 

 <input type="button" onclick="clientedetail()"></input> <div id="guardadoC"></div> 

Answer 1

您可以添加addEventListener('animationend', function() { ... }); 重置動畫，以便您可以再次運行它。

將CSS保留在CSS文件中，而不要在JavaScript中將其寫為字符串也是一個好主意。 現在，我們將一個類添加到元素中以執行所需的操作。

 function clientedetail() { var el = document.getElementById("guardadoC"); el.innerHTML = "Guardado."; el.classList.add("animating"); //This function runs when the CSS animation is completed var listener = el.addEventListener('animationend', function() { el.classList.remove("animating"); //this removes the listener after it runs so that it doesn't get re-added every time the button is clicked el.removeEventListener('animationend', listener); }); } 

 @keyframes background-fade { 0% { background-color: green; } 100% { background-color: none; } } #guardadoC { padding:5px; } #guardadoC.animating { animation: background-fade 3s; } 

 <button type="button" onclick="clientedetail()">click me</button> <div id="guardadoC"></div> 

Answer 2

您可以使用animationend事件重置動畫。

當CSS動畫完成時會觸發animationend事件（但如果它在完成之前中止，例如元素變得不可見或動畫從元素中移除，則不會觸發）。

您會在此演示中注意到，我沒有使用匿名函數。 使用匿名函數，我們最終將一遍又一遍地重新定義該函數，這不是您想要的性能。 使用函數引用，我們一次聲明一個函數並將一個事件綁定到它。

 const btn = document.querySelector(".myButton"); const guardadoC = document.getElementById("guardadoC"); btn.addEventListener("click", clientedetail); function clientedetail() { guardadoC.innerHTML = "Guardado."; guardadoC.style.cssText = "animation: background-fade 3s;padding:5px;"; } function resetAnimation() { guardadoC.innerHTML = ""; guardadoC.style.cssText = ""; } guardadoC.addEventListener("animationend", resetAnimation); 

 @keyframes background-fade { 0% { background-color: green; } 100% { background-color: none; } } 

 <input type="button" class="myButton"> <div id="guardadoC"></div> 

的jsfiddle

有關animationend的更多信息

Answer 3

您可以在每次單擊按鈕時重新創建元素。 這將是一次完全重置，因此即使您中斷上一個動畫也可以使用。

 function clientedetail() { var elem = document.getElementById("guardadoC"); var newElem = elem.cloneNode(true); elem.parentNode.replaceChild(newElem, elem); newElem.innerHTML = "Guardado."; newElem.style.cssText = "animation: background-fade 3s;padding:5px;"; } 

 @keyframes background-fade { 0% { background-color: green; } 100% { background-color: none; } } 

 <input type="button" onclick="clientedetail()"></input> <div id="guardadoC"></div> 

Answer 4

如果可以的話，根據類觸發它，您執行操作的方式只會執行一次。

或者，您可以銷毀該元素並像這樣重新創建它。

function clientedetail() {
    var element =  document.getElementById("guardadoC");
        if (typeof(element) != 'undefined' && element != null)
            {
              document.getElementById("guardadoC").remove();
              var remakeDiv = document.createElement("div");
              remakeDiv.setAttribute("id", "guardadoC");
              document.body.appendChild(remakeDiv)
            }

    document.getElementById("guardadoC").innerHTML = "Guardado.";
    document.getElementById("guardadoC").style.cssText = "animation: background-fade 3s;padding:5px;";
}