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';
  });
}

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

1 个答案: