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