动漫js onclick动画选择器

Posted 2021-03-31

我有anime js的这种效果

$(function(){

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

});

如何在我点击按钮时才能运行动画， 所以让我说我的html：

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

答案

好的，我明白了，在javascript中我应该有这条​​线 document.querySelector('.box').onclick = bouncingBall.play;

因此，当我点击类box时，它将为bouncingBall制作动画

另一答案

您的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