javascript - 带有 transitionend 的动画队列

Question

我已经选择了 4 个 DOM 元素，并希望使用 transitionend 事件一个接一个地制作动画。最终我希望 translate3d() 的 x 和 y 值是动态的，因此这是在 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>

Answer 1

我相信您可以使用将 transitionend 事件链接在一起的 .reduce() 函数来完成您想要的。在我的示例中，我只是切换了一个类，但您可以在元素上设置显式转换，而不是使用 .reduce() 的 index 参数计算您想要的定位>。请考虑以下事项:

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>