如何随机显示列表项的顺序？

Question

我有以下代码，当我使用 div 而不是列表项时，它可以工作。但是我不知道如何随机淡出列表项的顺序。我正在使用纯 Javascript 和 Greensock (TweenMax) 来为项目设置动画。

编码：http://codepen.io/dada78/pen/fd4f35272d48df628148f98c4a9e5459/

在我的 HTML 我有：

 <div id="spots">
      <ul>
        <li class="square"></li>
        <li class="square"></li>
        <li class="circle"></li>
        <li class="square"></li>
        <li class="square"></li>
        <li class="circle"></li>
    </ul>
 </div>

在我的 Javascript 中： var spotsAll = document.querySelectorAll("#spots");

 var tl = new TimelineMax(); 
 tl
   .set(spotsAll, {autoAlpha:0})
   .add(spotsIn);

 function spotsIn()
 {
  var spotsArray = [0, 1, 2, 3, 4, 5, 6];
  for(var i = 0; i < spotsArray.length; i++){
    tl.to(spotsAll[i], 0.5, {autoAlpha:1, ease: Back.easeOut.config(1.8)}, Math.random());}
 }

非常感谢您的任何建议！

Answer 1

您的 spotsAll 的选择器不正确。您只是选择了外部 div.

要修复它，只需将 spotsAll 选择器更改为：

var spotsAll = document.querySelectorAll("#spots li");

如何随机显示列表项的顺序？

How do I display the order of list items randomly?

html

javascript

random

gsap