javascript - 带有Transitionend的动画队列

我选择了4个DOM元素，并希望使用transitionend事件一个接一个地进行动画处理。最终，我希望x的y和translate3d()值是动态的，因此这是在JS中完成的原因，而不仅仅是使用CSS @keyframe动画。

我目前有此工作代码，但感觉有更好的方法。任何指针都很棒。谢谢!

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>

最佳答案

我相信您可以通过将.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>

这是一个示例，根据数组中要转换的所有元素在数组中的位置，从数组的索引中删除该元素以缩放当前元素:

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>

关于javascript - 带有Transitionend的动画队列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48648545/