Question

＆＃13;

const myButt = document.getElementById('my-butt');

myButt.style.transform = 'rotate(1turn)';

myButt.addEventListener('mouseenter', function() {
  myButt.style.transition = 'transform 10s';
  
  myButt.classList.add('no');
});

myButt.addEventListener('mouseleave', function() {
  myButt.style.removeProperty('transition');
  
  myButt.style.transform = 'rotate(0turn)';
});

＆＃13;

#my-butt{
  width: 100px;
  height:100px;
}
.no{
  transform:  none!important;
}

＆＃13;

<button id="my-butt">
  over my dead butt
</button>

＆＃13;

按钮最初旋转360度。当鼠标悬停在它上面时，按钮开始旋转回0度，这需要10秒钟。在播放动画时，如果鼠标离开按钮，按钮应立即跳到0度而不再进行任何过渡。

因此，换句话说，如果鼠标离开按钮并且只是跳到0度，我希望转换立即结束。

您可以运行代码段，但它目前无效。

Answer 1

好的，没关系。

在设置transform: none!important之前删除mouseleave事件中的rotate(0turn)课似乎有效。

css如何取消正在进行的转换

1 个答案: