Question 227090 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Click button after event finished

Why in the following code I can not click the button programmatically to translate the div again ?

const div1 = document.getElementsByClassName("div1")[0];

div1.addEventListener("transitionend", callback);
// Why this one does not work?
// div1.addEventListener("transitionend", play);

function play() {
  div1.classList.add("play");
}

function callback() {
  div1.classList.remove("play");
  // or this one?
  // play();
}
.div1 {
  width: 200px;
  height: 100px;
  background-color: limegreen;
}

.play {
  transition: transform 1s;
  transform: translateX(100px);
}
<div class="div1"></div>
<button onclick="play()">Play</button>
Tags:

3

Answers


  1. 0

    When you click the "Play" button, the play function is called and it adds the "play" class to div1. This triggers a transition and when the transition ends, the callback function is called, which removes the "play" class.

    If you want to toggle the translation on/off with button click modify the play function to add or remove the "play" class based on whether it’s there

    function play() {
  if (div1.classList.contains("play")) {
    div1.classList.remove("play");
  } else {
    div1.classList.add("play");
  }
}
    Login or Signup to reply.
  2. 0

    You should stop the animation with removing the play class and start it again with adding the play class after a zero timeout (that allows the browser to re-render and start the animation fresh):

      if(div1.classList.contains('play')){
    div1.classList.remove('play');
    setTimeout(()=>div1.classList.add('play'));
    return;
  }

    const div1 = document.getElementsByClassName("div1")[0];

div1.addEventListener("transitionend", callback);
// Why this one does not work?
// div1.addEventListener("transitionend", play);

function play() {
  if(div1.classList.contains('play')){
    div1.classList.remove('play');
    setTimeout(()=>div1.classList.add('play'));
    return;
  }
  div1.classList.add("play");
  
}

function callback() {
  div1.classList.remove("play");
  // or this one?
  // play();
}
    .div1 {
  width: 200px;
  height: 100px;
  background-color: limegreen;
}

.play {
  transition: transform 1s;
  transform: translateX(100px);
}
    <div class="div1"></div>
<button onclick="play()">Play</button>
    Login or Signup to reply.
  3. 0

    there is no effect to changing the class instantly.

    that is why you should use setTimeOut to call play again

    const div1 = document.getElementsByClassName("div1")[0];

div1.addEventListener("transitionend", callback);

function play() {
  div1.classList.add("play");
}

function callback() {
  div1.classList.remove("play");
  setTimeout(play);
}
    .div1 {
  width: 200px;
  height: 100px;
  background-color: limegreen;
}

.play {
  transition: transform 1s;
  transform: translateX(100px);
}
    <div class="div1"></div>
<button onclick="play()">Play</button>

    you might also use css animation to get the same effect with cleaner code

    const div1 = document.getElementsByClassName("div1")[0];

function play() {
  div1.classList.add("play");
}
    .div1 {
  width: 200px;
  height: 100px;
  background-color: limegreen;
}

.play {
  animation: go-right 1s infinite;
}

@keyframes go-right {
  100%{
    transform: translateX(100px);
  }
}
    <div class="div1"></div>
<button onclick="play()">Play</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search