Loop A Click Event Function On "animationend"

I have a question on how to loop a click event itself on animation end I have 3 pictures i want to rotate on click with an order : first click on first picture-> first picture

Solution 1:

It seem that you are using an #id selector which returns always the first occurrence, and stops.

My suggestion would be, to use class identifiers instead and reuse your action function.

var version1 = function () {
  // get all containers that has the class rotate-mevar rotateMe = document.querySelectorAll('.version-1 .rotate-me');
  // define animation duration, this is better than css animationendvar animationDuration = 1000; // milliseconds// recursive animation sequencevar startSequence = function (classname, items) {
    var [first, ...rest] = items;

    first.classList.add('rotate');

    setTimeout(function () {
      if (rest.length > 0) {
        startSequence(classname, rest)
      }
    }, animationDuration);
  };
  
  // click handle that starts the sequencevar handleClick = function () {
      startSequence('rotate', rotateMe);
  };
  
  // check if one rotateMe was matchedif (rotateMe.length > 0) {
    // add you action callback to the first match
    rotateMe[0].addEventListener('click', handleClick);
  }
}

// this version is blocking click before previeous element was clickedvar version2 = function () {
  // get all containers that has the class rotate-mevar rotateMe = document.querySelectorAll('.version-2 .rotate-me');

  // define animation duration, this is better than css animationendvar animationDuration = 1000; // milliseconds// active indexvar activeElement = 0;
  
  // click handle that starts the sequencevar handleClick = function (index, item) {
      if (index === activeElement) {
        item.classList.add('rotate');
        activeElement += 1;
      }
  };

  for (var i = 0, l = rotateMe.length; i < l; i += 1) {
    // add you action callback to the first match
    rotateMe[i].addEventListener('click', (function (index, item) {
      returnfunction () {
        handleClick(index, item);
      };
    })(i, rotateMe[i]));
  }
}


window.onload = function() {
  version1(); 
  version2(); 
}

.wrapper {
  display: flex;
}

.rotate-me {
  border-radius: 50%;
  overflow: hidden;
  font-size: 0;
}

.rotate-me:first-child {
  cursor: pointer;
}
.rotate-me.rotate {
  cursor: initial;
}
.rotate-me.rotate {
  transition: transform 1s;
  transform: rotate(360deg);
}

<h2>Version 1</h2><divclass="wrapper version-1"><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div></div><h2>Version 2</h2><divclass="wrapper version-2"><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div><divclass="rotate-me"><imgsrc="http://placekitten.com/150/150"alt="kitten placeholder"></div></div>

Solution 2:

var x = document.getElementById("first");x.addEventListener('click', event => {
x.classList.add("move");
  x.addEventListener("webkitAnimationEnd",myEndFunction);
  x.addEventListener("animationend",myEndFunction);});

var y = document.getElementById("second");y.addEventListener('click', event => {
y.classList.add("move");
  y.addEventListener("webkitAnimationEnd",myEndFunction);
  y.addEventListener("animationend",myEndFunction);});

Is this some thing what u are asking for?/