javascript - CSS transitions - 在不改变时间的情况下改变一个属性

Question

我使用 CSS 过渡旋转图像

img {
    transition:all 5s ease-out;
}

并用 jQuery 触发它

$('img').css({'transform':'rotate('+2000+'deg)'});

在旋转过程中的某个时刻(随机)我想改变旋转方向。图像应该继续当前的缓动和当前的持续时间。这可能吗？

Answer 1

你试过这样的事情吗？

div {
  background: red;
  width: 100px;
  height: 100px;
  transition: all 5s ease-out;

}

div.rotateRight {
  transform: rotate(200deg);
}

div.rotateLeft {
  transform: rotate(-200deg);
}

$('div').addClass('rotateRight');

setTimeout(function() {
  $('div').addClass('rotateLeft');
},4000);

https://jsfiddle.net/o3pg8d1d/