admin管理员组

文章数量:1023794

I have this effect of anime js

$(function(){

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

});

How can I run the animation only when I'm clicking on a button,
so let's say I have in my HTML:

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

I have this effect of anime js

$(function(){

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

});

How can I run the animation only when I'm clicking on a button,
so let's say I have in my HTML:

<div class="box">Button</div>
  • javascript
  • jquery
  • animation
Share Improve this question asked Oct 18, 2017 at 20:50 Nelson DenverNelson Denver 1151 gold badge3 silver badges12 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

OK, I got it, In the javascript I should have had this line

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

so when I click on the class box it will animate the bouncingBall

Your js code should look like this:

$(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
});

Documentation: http://animejs./documentation/#playPause

I have this effect of anime js

$(function(){

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

});

How can I run the animation only when I'm clicking on a button,
so let's say I have in my HTML:

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

I have this effect of anime js

$(function(){

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

});

How can I run the animation only when I'm clicking on a button,
so let's say I have in my HTML:

<div class="box">Button</div>
  • javascript
  • jquery
  • animation
Share Improve this question asked Oct 18, 2017 at 20:50 Nelson DenverNelson Denver 1151 gold badge3 silver badges12 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

OK, I got it, In the javascript I should have had this line

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

so when I click on the class box it will animate the bouncingBall

Your js code should look like this:

$(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
});

Documentation: http://animejs./documentation/#playPause

本文标签： javascriptanime js onclick animate a selectorStack Overflow

版权声明：本文标题：javascript - anime js onclick animate a selector - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745513239a2153921.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。