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

您可以使用0+constant事件来重置动画。

CSS动画完成后会触发animationend事件（但如果它在完成之前就中止了，例如元素变得不可见或动画从中移除元素）。

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

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

jsFiddle

More about animationend

Answer 3

您可以在每次单击按钮时重新创建元素。这将是一次完全重置，因此即使您中断上一个动画也可以使用。

https://

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

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

每次“单击”时使背景淡入

4 个答案: