时间戳

首页 > 解决方案 > 如何在循环中重新启动具有随机值的 CSS 动画？

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

问题描述

我有一个在 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 循环技术，但我不知道如何在这个工作流程中准确地实现它们。

有人能帮我吗？

标签： javascriptcssloopsrandomcss-animations

解决方案

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

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

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

推荐阅读