Javascript 如何在CSS转换中停止转换

我设置了一个CSS转换，如

 transition: all 2s 

然后我应用CSS来更改转换，如下所示：

 transform: rotate(20deg); 

过渡开始了

我想中途停止，让它留在那里，这样我就可以在它上面应用其他依赖于应用程序的JS了。。。暂停后的内容与问题无关要测试，我使用：

 setTimeout(function() {
   ...
 }, 1000);

停止转换的一个粗略方法是将CSS显示设置为“无”。 将转换设置为“无”或空字符串无效。过渡到变换的末尾。将CSS重置为当前CSS的另一个技巧适用于其他属性，但不适用于转换。将转换属性设置为“无”或空字符串也不会停止转换的转换

肯定有办法

有什么建议吗？最好使用JQuery

---

我不想使用动画。

为什么不在可以轻松管理状态的地方使用动画：

$（“按钮”）.eq（0）。单击（函数（）{
$（'.box'）.css（'animation-play-state'，'paused'）；
});
$（“按钮”）.eq（1）。单击（函数（）{
$（'.box'）.css（'animation'，'none'）；
});
.box{
利润率：50像素；
宽度：100px；
高度：100px；
背景：红色；
显示：内联块；
垂直对齐：顶部；
动画：动画10秒向前；
}
@动画关键帧{
到{
变换：旋转（180度）；
}
}

停止
重置
停止并返回？或者停止并停留？如果禁用转换怎么办？@ArthurGuiot如果你是说将转换CSS属性设置为“无”或空字符串，我尝试过。。。请参阅问题。@Tenabu Afif实际上，您可以通过简单地将这些属性还原为当前属性，在所有其他CSS转换的中途停止它。我在一些帖子/博客上学到的技巧，如$（选择器）.css（$（选择器）。.css（'opacity'，$）.css（'opacity；））这将停止不透明度转换，也适用于其他css属性，但由于某些原因，它不适用于转换。@Sam检查我下面的答案，我用这个技巧更新它，如果显示设置为无，动画不会停止。这是一个原因。。。此外，转换更为JS友好？@Sam是的，它们不会以无停止。。。他们停止与另一个财产，就像你可以看到的权利！我会检查我做错了什么或有什么不同。如果行得通，我会接受你的回答。我所做的唯一不同的事情是将transform属性直接作为CSS添加到元素上，而不是作为类。让我看看那里是否有问题…@Sam如果你直接添加，那么它就是问题所在。。。因为它已经是内联的，所以您得到的是这个值，我添加的最后一个值是$（selector）.css（'transform'，'…'）；这就是问题所在吗？它适用于不透明度、宽度等。