动漫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

OK，我知道了，在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