Question

我正在尝试使用JQuery和框架anime.js

为我的页面加载器实现for循环

＆＃13;

    var testimonialElements = $(".loader-animation");
    for(var i=0; i< Elements.length; i++){
        var element = Elements.eq(i);
        //do something with element
    
         var basicTimeline = anime.timeline();
           basicTimeline
      .add({
        targets: element,
        opacity: {
        value: ['1','0'],
        duration: 2000,
        delay: 4000
      },
      letterSpacing: {
        value: ['30px','10px'],
        duration: 2000,
        easing: 'easeInOutSine'
      }
    });
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container on-loader">	
    	<h2 class="loader-animation">Case1</h2>
    <h2 class="loader-animation">Case2</h2>
    <h2 class="loader-animation">Case3</h2>
    <h2 class="loader-animation">Case4</h2>
    </div>

＆＃13;

问题是，脚本没有循环并为每个循环启动动画。

非常抱歉，如果问题很简单，我是javascript＆amp; anime.js框架。

Answer 1

没有必要使用循环，首先你将.loader-animation选择器传递给你的动漫，你只需要使用callback函数，在该函数中它返回当前元素，它就是＆＃39;所有元素之间的顺序（1,2,3 ......）并将延迟乘以最后的顺序：（在你可以延迟第二次玩到甜蜜的意图之后）

见下面的工作代码段

＆＃13;

var basicTimeline = anime.timeline();
basicTimeline.add({
  targets: ".loader-animation",
  opacity: {
    value: ['1', '0'],
    duration: 2000,
    delay: function(el, i) {
      $(el).removeClass("otherclass");
      return 2000 * (i + 1);
    },
  },
  letterSpacing: {
    value: ['30px', '10px'],
    duration: 2000,
    easing: 'easeInOutSine',
    delay: function(el, i) {
      return 2000 * (i);
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<div class="container on-loader">
  <h2 class="loader-animation otherclass">Case1</h2>
  <h2 class="loader-animation otherclass">Case2</h2>
  <h2 class="loader-animation otherclass">Case3</h2>
  <h2 class="loader-animation otherclass">Case4</h2>
</div>

＆＃13;

如何使用anime.js

1 个答案: