动漫js onclick动画选择器

Question

我有anime js

的这种效果

$(function(){

    var bouncingBall = anime({
      targets: '.box',
      translateY: '50vh',
      duration: 300,
      loop: 4,
      direction: 'alternate',
      easing: 'easeInCubic'
    });

});

我只有在点击按钮时才能运行动画，所以让我说我的HTML：

<div class="box">Button</div>

Answer 1

好的，我明白了，在javascript中我应该有这条​​线

document.querySelector('.box').onclick = bouncingBall.play;

因此，当我点击课程box时，它会为bouncingBall

设置动画

Answer 2

您的js代码应如下所示：

$(function(){
    var bouncingBall = anime({
      targets: '.box',
      translateY: '50vh',
      duration: 300,
      loop: 4,
      direction: 'alternate',
      easing: 'easeInCubic',
      autoplay: false //if you don't want play animation on page load
    });

    document.querySelector('.box').onclick = bouncingBall //onclick event
});

文档：http://animejs.com/documentation/#playPause