Javascript 平滑旋转div的最简单方法是什么？

什么是使div在单击时旋转但带有过渡的最佳方法

我尝试过这一点，但它仅在添加类时平滑过渡，而在删除类时则不会：

js:

css:

.rotated{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-o变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
-webkit转换：所有0.1s线性；
}

转换

css属性应保留在元素上

transition

属性使旋转看起来平滑。当它在执行旋转的类上，并且您删除了该类时，甚至

transition

属性也会被删除。因此，旋转端不平滑

您的逻辑是正确的，但是可以使用不同的类来应用

-webkit转换：所有0.1s线性或直接应用于元素。确保在移除
旋转类时未移除该类


constmydiv=$（'#myDiv'）；
设置超时（（）=>{
myDiv.addClass（“旋转”）；
}, 1000);
div{
宽度：100px；
高度：100px；
背景色：红色；
过渡：所有1s线性；
}
.旋转{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-o变换：旋转（-90度）；
-ms变换：旋转（-90度）；
变换：旋转（-90度）；
}
只需在目标上使用
过渡持续时间
属性：


$（'#firstDiv'）。单击（函数（）{
$（this.toggleClass（'rotated'）；
});
#firstDiv{
宽度：适合的内容；
转换持续时间：2s；/*当类被删除时，您为什么希望它旋转？您现在可以使用rotate作为属性。
rotate:-90deg
。而且我认为转换应该存在于没有
。rotated
类的元素上。@SilenceDoood当类被删除时它会旋转，但它会旋转instantly@Axel求你了，助教让我们看看我的答案，它让你有可能切换旋转动画添加了一个工作示例。即使没有演示，它也更容易解释，但仍然..@vatz88
添加了一个什么的工作示例
？甚至没有初始方法
.toggleClass（）
在您的示例中：/@johannchopin它不必像问题中那样是精确的复制品。正确使用
transition
非常好。我想做一个简单的工作示例。@vatz88只需看看这个例子。您会看到，当类
在动画中被移除时，我不要平稳过渡到初始状态。但这实际上是个问题->
，但不是在类被删除时。
！@johannchopin我认为这两种方式都是平稳的。如果您对代码或实现有任何真正的问题，请明确询问。
$('#firstDiv' + id).click(function(){
    $("#Img" + id).toggleClass('rotated');
});