每次"onclick"时都使背景淡入

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>

js小提琴

更多关于动画结束

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;";
}