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

Question

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

我试过了，但只有在添加 class 时才能实现平滑过渡，而在删除 class 时则不会：

js :

$('#firstDiv' + id).click(function(){
    $("#Img" + id).toggleClass('rotated');
});

css :

.rotated { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.1s linear;
}

Answer 1

transition css 属性应该保留在元素上。

transition 属性是使旋转看起来平滑的原因。当它位于正在旋转的 class 上并且您删除 class 时，甚至 transition 属性也会被删除。因此轮换结束并不顺利。

您的逻辑是正确的，但使用方法可能不同 class 以应用 -webkit-transition: all 0.1s linear; 或直接应用到元素上。确保在删除 rotated class.

时它没有被删除

const myDiv = $('#my-div');

setTimeout(()=>{
  myDiv.addClass('rotated');
}, 1000);

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s linear;
}

.rotated { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='my-div'>
</div>

Answer 2

只需在目标上使用 transition-duration 属性 :

$('#firstDiv').click(function() {
  $(this).toggleClass('rotated');
});

#firstDiv {
  width: fit-content;
  transition-duration: 2s;  /* <-- Provide a smooth animation from 2s on all 'changes'*/
}

.rotated {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transition: all 0.1s linear;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="firstDiv">
  test
</div>

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

What is the simplest way to rotate a div smooth?

javascript

css

animation

transition

rotation