javascript - 在继续之前等待使用 js 设置 CSS 属性。

Question

考虑这个 JS 函数:

function myFunc() {

  const date = new Date();
  const secs = date.getSeconds();
  const secDeg = 360*(secs / 60)+ 90 ;

  hand.style.transitionDuration = '0s';
  hand.style.transform = `rotate(${secDeg}deg)`;
  hand.style.transitionDuration = '2s';
}

我希望旋转以 0 秒的过渡完成。但是，它使用值“2s”，即使它是在旋转之后设置的。这是因为 rotate() 完成时间太长了吗？我该如何处理？我想我可以使用 transitionend 事件监听器来完成，但是有没有更简洁的方法？

Answer 1

它被称为快速，所以它会在那个时候覆盖计时器 ;) 所以是的，最好使用延迟或事件结束。

(如果你有 jquery)

function myFunc() {

  const date = new Date();
  const secs = date.getSeconds();
  const secDeg = 360*(secs / 60)+ 90 ;

  hand.style.transitionDuration = '0s';
  hand.style.transform = `rotate(${secDeg}deg)`;
  $(hand).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
                  hand.style.transitionDuration = '2s';
  });
}