我有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
});