anime.js

Question

我正在尝试使用播放按钮调用 anime.js 动画。文档解释了如何只用一个按钮播放动画 (querySelector)，但我需要从不同的按钮播放相同的动画。

我尝试用 querySelectorAll 而不是单个 querySlector 来编写一个函数，但没有成功：

 var animation = anime({
  targets: '.reds',
  translateX: ['-100%', '100%'],
  duration: 1600,
  easing: 'easeInOutQuad',
  autoplay: false,
});

var oks = document.querySelectorAll(".correct");

for(x=0; x<oks.length; x++){
    var ok = oks[x];
  ok.addEventListener("click", function(){
    animation.play;
  });
}

anime.js 文档是这样的：

var animation = anime({
  targets: '.play-pause-demo .el',
  translateX: 270,
  delay: function(el, i) { return i * 100; },
  direction: 'alternate',
  loop: true,
  autoplay: false,
  easing: 'easeInOutSine'
});

document.querySelector('.play-pause-demo .play').onclick = animation.play;
document.querySelector('.play-pause-demo .pause').onclick = animation.pause;

有谁知道如何使用 class 到运行来自多个元素的相同动画？谢谢！

Answer 1

我花了一些时间阅读文档，看来你必须使用循环遍历你的所有元素，你需要附加 onclick 事件。

这是工作示例到运行来自多个元素的相同动画：

var animation = anime({
            targets: '.play-pause-demo',
            translateX: 270,
            delay: function (el, i) { return i * 100; },
            direction: 'alternate',
            loop: true,
            autoplay: false,
            easing: 'easeInOutSine'
        });


document.querySelectorAll(".correct").forEach((el)=> el.onclick = animation.play);

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" ></script>

    <button class="correct">btn 1</button>
    <button class="correct">btn 2</button>
    <button class="correct">btn 3</button>
    <button class="correct">btn 4</button>
    <button class="correct">btn 5</button>

    <div class="play-pause-demo">this is div</div>

anime.js - 如何从多个按钮调用动画（同class）

anime.js - how to call animation from multiple buttons (same class)

javascript