Question

使用此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);
}

JS

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

在此示例中，当点击div时， rotate 类将应用于它，因此它将旋转360度，如css中所定义。有时我们会移除旋转类，所以div再次旋转回原来的位置。

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

Answer 1

您可以为过渡添加新类，并删除旋转以及过渡类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle Demo

Answer 2

Fiddle

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

CSS3过渡效果问题

2 个答案: