Question

我正在用Javascript操作几个CSS类。我的脚本是一个定时序列，它们一起播放动画。我觉得我很亲密，但我被卡住了，任何见解？

基本上，我需要步骤1和步骤2同时在一起持续一秒，步骤3在步骤1和2，步骤4和步骤5之后一起持续一秒钟在步骤1,2,3和4等之后持续一秒的同一时间。在步骤6结束时，重置计时器并重复。

我有一个SVG，它由一堆行组成。这些行中的一些必须在序列中的某个时间“开启”，有些必须变大，所以我只是在那段时间内切换他们的类，否则它们就会关闭。

这就是我的代码的样子（简单的SVG只是演示模型）。它将手动向类添加类，但不会重置其计时器并无限重复，因为我在添加它之后无法弄清楚如何清除类：

<!DOCTYPE html>
<html>
<head>
    <style>
      #line1, #line2, #line3, #line4, #line5, #line6 {
          visiblity: hidden;
      }

      .showElement {
          visibility: visible !important;
      }   

      .growElement {
          transform: scale(1.5) perspective(1px);
      }
    </style>
</head>

<body>

<svg height="210" width="500">
  <line id="line1" class="first" x1="0" y1="0" x2="200" y2="200" style="stroke:red;stroke-width:2" />
  <line id="line2" class="first" x1="0" y1="0" x2="200" y2="300" style="stroke:orange;stroke-width:2" />
  <line id="line3" class="second" x1="0" y1="0" x2="200" y2="400" style="stroke:yellow;stroke-width:2" />
  <line id="line4" class="third" x1="0" y1="0" x2="200" y2="500" style="stroke:green;stroke-width:2" />
  <line id="line5" class="fourth" x1="0" y1="0" x2="200" y2="600" style="stroke:blue;stroke-width:2" />
  <line id="line6" class="fifth" x1="0" y1="0" x2="200" y2="700" style="stroke:purple;stroke-width:2" />
  <line id="line7" class="sixth" x1="0" y1="0" x2="200" y2="800" style="stroke:pink;stroke-width:2" />
</svg>

<script>
        document.addEventListener('DOMContentLoaded', function() {

            setInterval(function() {
                // create array of all the elements with the class 'first', loop over each one
                // in this case, ['
                var firstClass = document.getElementsByClassName("first");
                console.log(firstClass[0]);
                console.log(firstClass[1]);
                setInterval(function(){
                    firstClass[0].classList.add("showElement");
                    firstClass[1].classList.add("showElement");
                }, 1000);

                var secondClass = document.getElementsByClassName("second");
                console.log(secondClass[0]);
                console.log(secondClass[1]);
                setInterval(function(){
                    secondClass[0].classList.add("showElement");
                    secondClass[1].classList.add("showElement");
                }, 2000);

                var thirdClass = document.getElementsByClassName("third");
                console.log(thirdClass[0]);
                setInterval(function(){
                    thirdClass[0].classList.add("showElement");
                }, 3000);

                var fourthClass = document.getElementsByClassName("fourth");
                console.log(fourthClass[0]);
                setInterval(function(){
                    fourthClass[0].classList.add("showElement");
                }, 4000);
            }, 4000);
     });
</script>

</body>
</html>

我还需要弄清楚如何一次添加多个类，仅用于一些步骤。例如，我想突然出现元素.first，.second和.third，所以我给它们.showElement，但是元素。我想要添加.growElement。我该怎么做？

这是我的Javascript代码，它不会同时接受多个内容。它使用一个计数器，所以不像以前那样粗糙。它会查看列表中的每个项目并应用一种样式：

<script>
document.addEventListener('DOMContentLoaded', function() {

    var connections = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'];
    var i = 0; // index of the first item to show


    setInterval(function(){
        console.log(connections[i]);
        document.getElementsByClassName(connections[i]).classList.add("showElement");

        var counter = connections[i++];  // get the current item index and increment
        if ((i == connections.length)) {
            i = 0; // reset to first element if reach the end
        }
    }, 1000);

});

注意：我不打算使用jQuery，只是纯JavaScript。此动画存在于单页网站上，没有其他带有外部SVG的JavaScript，因此它必须存在于SVG文件中，并且我没有看到安装大型库的重点。

但我正在寻找可能更好的方法来解决这个问题。有人告诉我这是'承诺'的工作。我正在研究Snap.svg，Q，When，WinJS和RSVP.js库，如果你认为它会更好（甚至是jQuery，如果它真的更容易），我会欢迎你的建议。

Answer 1

var connections = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'];

function showElements(i,duration){
    var elements = document.getElementsByClassName(connections[i]); 
    elements.map((e) =>  e.classList.add('showElement'))
    setTimeout(()=>{
        //remove the .showElement after duration to display has elapsed
        elements.map((e)=> e.classList.remove('showElement'))
        //recursively calls the next animation to be played, resets at 6
        showElements((i+1)%6,duration)
    },duration)        
}

不确定这是否是你想要的确切方式，但它会为每个持续时间添加showElement，然后将其删除。

showElements(0,1000)

Answer 2

这是一个更清洁的版本，可以在1秒的时间间隔内完成动画，并且可以让您更清楚地控制每帧上发生的事情。

要添加多个类，您可以一次添加任何您喜欢的内容，例如：classList.Add('showElement', 'growElement')（同样适用于删除。See examples）

动画将通过在最后一帧中将帧设置回0来重复循环（0因为帧计数器在switch语句之后递增）。然后在第一帧中确保清除最后一帧的样式。

<html>
<head>
    <style>
      #line1, #line2, #line3, #line4, #line5, #line6, #line7 {
        visibility: hidden;
        transform: scale(1) perspective(1);
        transition: .5s transform;
      }

      .showElement {
          visibility: visible !important;
      }   

      .growElement {
          transform: scale(3.5) perspective(1px);
      }
    </style>
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
  
<svg height="210" width="500">
  <line id="line1" class="first" x1="0" y1="0" x2="200" y2="200" style="stroke:red;stroke-width:2" />
  <line id="line2" class="first" x1="0" y1="0" x2="200" y2="300" style="stroke:orange;stroke-width:2" />
  <line id="line3" class="second" x1="0" y1="0" x2="200" y2="400" style="stroke:yellow;stroke-width:2" />
  <line id="line4" class="third" x1="0" y1="0" x2="200" y2="500" style="stroke:green;stroke-width:2" />
  <line id="line5" class="fourth" x1="0" y1="0" x2="200" y2="600" style="stroke:blue;stroke-width:2" />
  <line id="line6" class="fifth" x1="0" y1="0" x2="200" y2="700" style="stroke:purple;stroke-width:2" />
  <line id="line7" class="sixth" x1="0" y1="0" x2="200" y2="800" style="stroke:pink;stroke-width:2" />
</svg>

<script>
                
var frame = 1;

// create array of all the elements with the class 'first', loop over each one
// in this case, ['
var firstClass = document.getElementsByClassName("first");
var secondClass = document.getElementsByClassName("second");
var thirdClass = document.getElementsByClassName("third");
var fourthClass = document.getElementsByClassName("fourth");
var fifthClass = document.getElementsByClassName("fifth");
var sixthClass = document.getElementsByClassName("sixth");
var seventhClass = document.getElementsByClassName("seventh");

function hideUnusedClasses(p_classesArray) {
  p_classesArray.forEach(function(array, index){
    for(var i=0;i<array.length;++i) {
      array[i].classList.remove('showElement', 'growElement');
    }
  });
}

var interval = setInterval(function(){
  //console.log('Run every 1 second');
  switch(frame) {
    case 1:
      //console.log('frame', frame);
      hideUnusedClasses([sixthClass]);
      for(var i=0;i<firstClass.length;++i) { 
        firstClass[i].classList.add('showElement');
      }
      break;
    case 2:
      //console.log('frame', frame);
      //console.log('Delete 1 class');
      hideUnusedClasses([firstClass]); 
      for(var i=0;i<secondClass.length;++i) {
        secondClass[i].classList.add('showElement');
      }
      break;
    case 3:
      //console.log('frame', frame);
      //console.log('Delete 2 class');
      hideUnusedClasses([secondClass]);
      for(var i=0;i<thirdClass.length;++i) {
        thirdClass[i].classList.add('showElement', 'growElement');
      }
      break;
    case 4:
      //console.log('frame', frame);
      hideUnusedClasses([thirdClass]);
      //console.log('Delete 3 class');
      for(var i=0;i<fourthClass.length;++i) {
        fourthClass[i].classList.add('showElement');
      }
      break;
    case 5:
      //console.log('frame', frame);
      hideUnusedClasses([fourthClass]);
      for(var i=0;i<fifthClass.length;++i) {
        fifthClass[i].classList.add('showElement');
      }
      break;
    case 6:
      //console.log('frame', frame);
      hideUnusedClasses([fifthClass]);
      for(var i=0;i<sixthClass.length;++i) {
        sixthClass[i].classList.add('showElement');
      }
      frame = 0;
      break;  
    default:
      //console.log('all done');
      //clearInterval(interval);
  }
  ++frame;
}, 1000);
</script>

</body>
</html>

按时间顺序的Javascript动画

2 个答案: