CSS3跃迁效应问题

Question

使用来自这个用onclick旋转图像的引用，当单击div元素时，我尝试将css3转换应用到div。演示是这里，一切都工作得很完美。

<div class="testRotate">Test rotate</div>

CSS

.testRotate{
 width: 300px;
  height: 50px;
  border: 1px solid black;
  padding: 20px;
  margin: 0px auto;
  margin-top: 50px;
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.testRotate.rotate{
  transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

JS

$(function(){
    $("div").click( function(){
        $(this).addClass("rotate");
        setTimeout(function(){$("div").removeClass("rotate");}, 1500);
    });
});

在这个例子中，当单击div时，旋转类将被应用到它，因此它将旋转360度，就像css中定义的那样。有时，我们将删除旋转类，因此div再次返回到它原来的位置。

现在我需要的是，当它点击元素时，它必须旋转360度，但是一旦旋转类被移除，它就不应该被旋转回来。

Answer 1

您可以添加一个用于转换的新类，删除旋转类以及用于转换的类。

​

 $(function(){
        $("div").click( function(){
            $(this).addClass("testRotate rotate");
            setTimeout(function(){$("div").removeClass("testRotate rotate");}, 1500);
        });
    });

    .test {
       width: 300px;
      height: 50px;
      border: 1px solid black;
      padding: 20px;
      margin: 0px auto;
      margin-top: 50px;  
    }
    .testRotate{
      -moz-transition: transform 1s;
      -webkit-transition: transform 1s;
      transition: transform 1s;
    }
    
    .testRotate.rotate{
      transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<div class="test testRotate">Test rotate</div>

​

小提琴演示

Answer 2

小提琴

$("div").click(function() {
    if (  $(this).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(360deg)");
    } else {
        $(this).css("transform","");
    }
});