Transition animation queue

Question

I have selected 4 DOM elements and want to animate one after another using an event transitionend. In the end, I would like to see the value xand y translate3d()are dynamic, so the reason is that it is done in JS, rather than just using something like animation CSS @keyframe.

I currently have this working code, but I feel that there might be a better way. Any pointers would be great. Thank!

var formComponents = document.querySelectorAll('.form-component');
formComponents[0].style.transitionDelay = '2s';
formComponents[0].style.webkitTransform = 'translate3d(550px, -250px, 0)';
formComponents[0].addEventListener('transitionend', function(e) {
  formComponents[1].style.webkitTransform = 'translate3d(315px, -250px, 0)';
  formComponents[1].addEventListener('transitionend', function(e) {
    formComponents[2].style.webkitTransform = 'translate3d(150px, -250px, 0)';
    formComponents[2].addEventListener('transitionend', function(e) {
      formComponents[3].style.webkitTransform = 'translate3d(-125px, -250px, 0)';
    }, false);
  }, false);
}, false);

<div class="form-component"></div>
<div class="form-component"></div>
<div class="form-component"></div>
<div class="form-component"></div>

Run codeHide result

Answer 1

, , , .reduce(), transitionend. , , index .reduce(). :

const transformer = document.getElementById("transformer"),
  targets = document.getElementsByClassName("changable");

const firstEl = targets[0];

if (firstEl) {
  Array.from(targets).slice(1).reduce((prev, el) => {
    prev.addEventListener("transitionend", e => {
      el.classList.toggle("change");
    });
    return el;
  }, firstEl);

  transformer.addEventListener("click", e => {
    targets[0].classList.toggle("change");
  });
}

.changable {
  display: inline-block;
  transition: transform 200ms ease;
}

.change {
  transform: scale(1.5);
}

<p><span class="changable">Lorem Ipsum</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span>  <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span></p>
<button id="transformer" type="button">Transform</button>

Hide result

, :

const transformer = document.getElementById("transformer"),
  targets = document.getElementsByClassName("changable");

const firstEl = targets[0];

if (firstEl) {
  Array.from(targets).slice(1).reduce((prev, el, idx, arr) => {
    prev.addEventListener("transitionend", e => {
      el.style.transform = `scale(${(((idx+1) / arr.length)+1) *2})`;
    });
    return el;
  }, firstEl);

  transformer.addEventListener("click", e => {
    firstEl.style.transform = "scale(2)";
  });
}

.changable {
  display: inline-block;
  transition: transform 200ms ease;
}

<p><span class="changable">Lorem Ipsum</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span>  <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span> <span class="changable">dolumn deloris</span></p>
<button id="transformer" type="button">Transform</button>

Hide result