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

Question

使div在点击时旋转但有过渡效果的最佳方法是什么？

我尝试过此操作，但是它仅在添加类时进行平滑过渡，而在删除类时不进行平滑过渡：

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属性是使旋转看起来平滑的原因。当它在进行旋转的类上并且您删除该类时，甚至transition属性也会被删除。因此旋转端不平滑。

您的逻辑是正确的，但可以使用不同的类来应用-webkit-transition: all 0.1s linear;或直接应用于元素。确保在删除rotated类时未将其删除。

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 {
  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>