每次都让背景淡入淡出 "onclick"

Question

我希望 DIV 显示一条确认消息，其中每次单击都会激活 css 效果 "animation" 或 "fade out"。它在第一次点击时工作正常，但在随后的点击中不起作用。

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 也是一个好主意。现在，我们向元素添加一个 class 来执行我们想要的操作。

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 事件来重置动画。

The animationend event is fired when a CSS Animation has completed (but not if it aborts before reaching completion, such as if the element becomes invisible or the animation is removed from the element).

您会注意到在此演示中我没有使用匿名函数。使用匿名函数，我们最终会一遍又一遍地重新定义函数，这不是您想要的性能。使用函数引用，我们声明一个函数一次并将事件绑定到它。

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

More about 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

如果可以的话，根据class触发它，你这样做的方式只会做一次。

或者您可以像这样销毁该元素并重新创建它。

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

每次都让背景淡入淡出 "onclick"

Make a background fade in every time "onclick"

javascript

css

fade