Javascript CSS3过渡效应问题

通过本文的引用，我试图在单击div元素时将css3转换应用于div。演示是一切工作都很完美

HTML

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

JS

.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);
}

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

在本例中，当单击div时，rotate类将应用于它，因此它将旋转360度，如css中所定义的。有时我们移除rotate类之后，div再次旋转回其原始位置

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

---

您可以添加新的转换类，删除rotate以及转换类

$（函数（）{
$（“div”）。单击（函数（）{
$（this.addClass（“testRotate”）；
setTimeout（function（）{$（“div”）.removeClass（“testRotate”）；}，1500）；
});
});
.test{
宽度：300px；
高度：50px；
边框：1px纯黑；
填充：20px；
保证金：0px自动；
边缘顶部：50px；
}
.testRotate{
-moz跃迁：变换1s；
-webkit转换：转换1s；
转变：转变1s；
}
.testRotate.rotate{
变换：旋转（360度）；
-moz变换：旋转（360度）；
-webkit变换：旋转（360度）；
}

测试旋转
你不能那样做。你；d需要研究是否可能使用
动画
而不是
过渡
，并将其与
动画填充模式
相结合，以便在结束时应用先前的效果。（救援的动画填充模式！这里有一个链接：）
$("div").click(function() {
    if (  $(this).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(360deg)");
    } else {
        $(this).css("transform","");
    }
});