Javascript transition one after the other

Question

What I want to do is play a transition from the beginning if the user presses the button again. The problem right now is if the user clicks twice or more the button it will not start the two animations properly (one after the other).

So right now transitions are working but I have trouble making this work if the user clicks the button more than once.

let button = document.querySelector("button")
let box = document.querySelector(".box")

button.onclick = () => { 

  box.style.transform = "";

  anim1(function(){
    anim2(function() {

    })
  })

}


function anim1(cb) {
  box.style.transition = ""
  box.clientHeight;
  box.style.transition = "all 1s";
  box.style.transform = "translateX(50px)";
  setTimeout(() => { 
    cb()

  },1000)
}

function anim2(cb) {
  box.style.transition = ""
  box.clientHeight;
  box.style.transition = "all 1s";
  box.style.transform = "translateX(350px)";
  setTimeout(() => { 
    cb()

  },1000)
}

Live example https://jsfiddle.net/kzjpb55f/

trincot · Accepted Answer · 2017-07-27 17:36:46Z

Clear the pending timeout with clearTimeout whenever you get a new click event:

let button = document.querySelector("button")
let box = document.querySelector(".box")
let timer; // use this variable to trace any pending timeout

button.onclick = () => { 
  clearTimeout(timer); // clear any pending timeout
  box.style.transform = "";

  anim1(function(){
    anim2(function() {
      
    })
  })
  
}

function anim1(cb) {
  box.style.transition = ""
  box.clientHeight;
  box.style.transition = "all 1s";
  box.style.transform = "translateX(50px)";
  timer = setTimeout(cb,1000); // remember last created timeout
}

function anim2(cb) {
  box.style.transition = ""
  box.clientHeight;
  box.style.transition = "all 1s";
  box.style.transform = "translateX(350px)";
  timer = setTimeout(cb,1000); // remember last created timeout
}

.box {
  height:50px;
  width:50px;
  background-color:red;
}

<button>animate</button>
<div class="box"></div>

Nils Schlüter · Accepted Answer · 2017-07-27 17:25:52Z

You can simply add another variable which is true if there is currently an animation running, otherwise false.

I updated your fiddle with an example on how you could do this.

let button = document.querySelector("button")
let box = document.querySelector(".box")
let animating = false;

button.onclick = (e) => { 



  if (!animating) {
    box.style.transform = "";

  animating = true;
    anim1(function(){
      anim2(function() {
        animating = false;
      })
    })

  }

}


function anim1(cb) {
  box.style.transition = ""
  box.clientHeight;
  box.style.transition = "all 1s";
  box.style.transform = "translateX(50px)";
  setTimeout(() => { 
    cb()

  },1000)
}

function anim2(cb) {
  box.style.transition = ""
  box.clientHeight;
  box.style.transition = "all 1s";
  box.style.transform = "translateX(350px)";
  setTimeout(() => { 
    cb()

  },1000)
}

Collectives™ on Stack Overflow

Javascript transition one after the other

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related