CODEWITHSUNDEEP
javascriptcsstransform
Free Tears
Free Tears

Reputation: 397

when I click twice css3 transform is not working

I want the square rotation when I click the start button.but:

when I click once ,it is working. when I run twice ,this css3 effect is not working.

$(function(){
						
	var $obj=$(".red");
	
	$("#btnStart").on("click",function(){
		$obj.removeClass("run").addClass("run");
	});
			
});
body{padding:100px;}

.red{background:#f00;width:100px;height: 100px;}

.run{
	transform:rotate(3600deg);
	transition: transform 5s ease 0s;
	-moz-transition:transform 5s ease 0s;
	-webkit-transition:transform 5s ease 0s;
	-o-transition:transform 5s ease 0s;
}
<html>
	<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
<body>
	<div class="red"></div>
	
	<br/>
	
	<button id="btnStart">
		开始旋转
	</button>
	
	</body>
</html>

Upvotes: 0

Views: 151

Answers (2)

Maxouhell
Maxouhell

Reputation: 796

Instead of add/remove class, you can use animate() function of jQuery ! 

$(function(){
						
	var $obj=$(".red");
	
	$("#btnStart").click(function(){
		$('.red').animate({  borderSpacing: -3600 }, {
                step: function(now,fx) {
                $(this).css('-webkit-transform','rotate('+now+'deg)'); 
                $(this).css('-moz-transform','rotate('+now+'deg)');
                $(this).css('transform','rotate('+now+'deg)');
              },
              duration:'slow'
           },'linear');
	});
			
});
body{padding:100px;}

.red{background:#f00;width:100px;height: 100px;}
<html>
	<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
<body>
	<div class="red"></div>
	
	<br/>
	
	<button id="btnStart">
		开始旋转
	</button>
	
	</body>
</html>

Upvotes: 1

thepio
thepio

Reputation: 6263

You need to have a timeout in between removing and adding the class. Otherwise it won't recognize the change.

$(function(){
  var $obj=$(".red");
  $("#btnStart").on("click",function(){
    $obj.removeClass("run");
    setTimeout(function(){
      $obj.addClass("run");
    }, 10);
  });		
});
body{padding:100px;}

.red{background:#f00;width:100px;height: 100px;}

.run{
	transform:rotate(3600deg);
	transition: transform 5s ease 0s;
	-moz-transition:transform 5s ease 0s;
	-webkit-transition:transform 5s ease 0s;
	-o-transition:transform 5s ease 0s;
}
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="red"></div><br/>
    <button id="btnStart">
		开始旋转
	</button>
  </body>
</html>

Upvotes: 2

Related Questions