javascript - 如何在循环中重新启动具有随机值的 CSS 动画？

Question

在 CSS 自定义属性的帮助下，我有一个随机使用 CSS 和 JS 动画的元素，方法如下:

var myElement = document.querySelector('#my-element');

function setProperty(number) {
  myElement.style.setProperty('--animation-name', 'vibrate-' + number);
}

function changeAnimation() {
  var number = Math.floor(Math.random() * 3) + 1;
  setProperty(number);
  /* restart the animation */
  var clone = myElement.cloneNode(true);
  myElement.parentNode.replaceChild(clone, myElement);
}

myElement.addEventListener('animationend', changeAnimation, false);

#my-element {
  width: 50px;
  height: 50px;
  background: #333;
}

 :root {
  --animation-name: vibrate-1;
}

#my-element {
  animation: 3.3s 1 alternate var(--animation-name);
}

@keyframes vibrate-1 {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes vibrate-2 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes vibrate-3 {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

<div id="my-element"></div>

背后的想法是有一组动画，每个动画的结尾随机切换到另一个。 (最后的不透明度始终为 0 以进行平滑的隐形切换。)

现在，令人惊讶的是，上面的这段代码运行得很好，除了它只执行一次然后就停止了。

我现在有 JS 循环技术，但我不知道如何在这个工作流中准确地实现它们。

有人可以帮助我吗？

Answer 1

当您用克隆的元素替换该元素时，您应该重新分配 animationend 事件监听器:

var clone = myElement.cloneNode(true);
clone.addEventListener('animationend', changeAnimation, false);
myElement.parentNode.replaceChild(clone, myElement);

顺便说一句，JavaScript中的变量不能包含-，所以my-element应该是myElement。