CSS3 过渡效果的问题答案

【问题标题】：Issue with CSS3 transition effectCSS3 过渡效果的问题
【发布时间】：2015-03-04 16:20:59
【问题描述】：

通过此 Rotate image with onclick 的引用，我尝试在单击 div 元素时将 css3 转换应用于 div。演示是here 一切正常。

HTML

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

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

在这个例子中，当点击 div 时，rotate 类将被应用到它，所以它会旋转 360 度，正如 css 中定义的那样。有时我们会删除 rotate 类，所以 div 再次旋转回原来的位置。

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

【问题讨论】：

你不能那样做。您需要考虑使用animation 而不是transition 并将其与animation-fill-mode 结合使用，以使其在结束时应用先前的效果。（动画填充模式救援！这是一个链接：developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode）

标签： javascript jquery html css

【解决方案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>

Fiddle Demo

【讨论】：

【解决方案2】：

Fiddle

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

【讨论】：