时间戳

首页 > 解决方案 > 仅在所有转换结束后运行代码

javascript - 仅在所有转换结束后运行代码

问题描述

这对我来说是个脑筋急转弯。

每次转换结束时都会触发此事件，在我们的例子中是5 次，因为backgroundColor, borderTopLeftRadius, borderTopRightRadius... 我不想要，我希望此事件仅在所有转换结束后触发。这是一个片段：

function changeStyle() {
  const elem = document.getElementById("elem");
  const logs = document.getElementById("logs");
  elem.style.backgroundColor = "red";
  elem.style.borderRadius = "30px";

  elem.ontransitionend = () => {
    logs.insertAdjacentText("beforeend", "transition ended");
  }
}
#elem {
  height: 100px;
  width: 100px;
  color: white;
  background-color: blue;
  transition: background-color 0.5s, border-radius 0.6s;
}
<div onclick="changeStyle()" id="elem">
  click me !
</div>

<span id="logs"></span>

标签： javascripthtmldomeventsdom-events

解决方案

该transitionend事件包含一个propertyName属性，该属性引用结束的属性转换。在这里，您可以检查事件以检查哪个属性导致事件触发。由于最长的过渡是边界半径，请检查是否propertyName是边界半径之一：

function changeStyle() {
  const elem = document.getElementById("elem");
  const logs = document.getElementById("logs");
  elem.style.backgroundColor = "red";
  elem.style.borderRadius = "30px";

  elem.ontransitionend = (e) => {
    if (e.propertyName === "border-bottom-right-radius") {
      logs.insertAdjacentText("beforeend", "transition ended");
    }
  }
}
#elem {
  height: 100px;
  width: 100px;
  color: white;
  background-color: blue;
  transition: background-color 0.5s, border-radius 0.6s;
}
<div onclick="changeStyle()" id="elem">
  click me !
</div>

<span id="logs"></span>

推荐阅读