javascript - 使用 vanilla JavaScript 控制 CSS 动画

Question

我正在尝试编写一个可重用的 JS 函数来控制许多形状上的 CSS 动画。我会尽力解释我要实现的目标。

目标是控制一些事情:

• param1:正在生成的 li 元素(形状)的数量
• param2 和 param3:每个生成的形状的随机动画持续时间的数字范围
• param4 和 param5:每个生成的形状的随机左边距的数字范围

我希望能够在网站的不同页面上使用此功能。例如，我想在主页上将形状作为整个背景的一部分，但在另一个页面上，在一些文本内容旁边创建一个动画形状的柱子。

HTML

<ul id="bg_list">
</ul>

CSS

:root {
  --animation-duration: 2s;
  --margin-left: 5px; 
}

#bg_list {
  position: absolute;
  top: 0;
  left: 0;
  overflow: none;
  width: 80%;
  height: 92%;
}


#bg_list li {
  position: absolute;
  display: inline-block;
  list-style: none;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid rgba(27, 23, 49, 0.5);
  bottom: -10px;
  overflow: none;
  animation: animate var(--animation-duration) linear infinite;
  margin-left: var(--margin-left);
  z-index: -1;
}


@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 0.2;
      border-radius: 0;
  }
  50% {
    opacity: 0.5;
  }
  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 1;
      border-radius: 50%;
  }
}

JS

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");
  var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
  var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);

  for(let i = 0; i < x; i++) {
    var li = document.createElement("li");
    ul.appendChild(li);
    li.style.setProperty('--animation-duration', duration + 's');
    li.style.setProperty('--margin-left', margin + 'px');
  }
}

bgTriangles(5, 20, 10, 500, 5);

上面的代码大部分都有效，您可以通过刷新页面看到这一点，但是我没有得到预期的形状数量，而且它们似乎堆叠在彼此之上，而不是每个都获得随机动画。

这是一个演示:pen

Answer 1

你做的几乎是正确的，有一点异常(exception):你的随机数在循环之前计算一次，并且每个三 Angular 形都有相同的持续时间和边距。以下是修改代码以使其工作的方法:

function bgTriangles(x, max_d, min_d, max_m, min_m) {
  var ul = document.getElementById("bg_list");

  for(let i = 0; i < x; i++) {
    var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
    var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);
    var li = document.createElement("li");
    ul.appendChild(li);
    li.style.setProperty('animation-duration', duration + 's');
    li.style.setProperty('margin-left', margin + 'px');
  }
}

说清楚。我移动了以下两行:

var duration = Math.floor(Math.random() * (max_d - min_d + 1) + min_d);
var margin = Math.floor(Math.random() * (max_m - min_m + 1) + min_m);

他们现在在循环中，在循环的最开始。无需其他更改。

这是你更新的笔:https://codepen.io/anon/pen/RzVVmm