当我单击两次时，css3 转换不起作用

when I click twice css3 transform is not working

本文关键字：css3 转换 不起作用 两次 单击      更新时间：2023-09-26

我想要单击开始按钮时的方形旋转。但是：

当我单击一次时，它正在工作。 当我运行两次时，此 css3 效果不起作用。

$(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>

在删除和添加类之间需要有一个超时。 否则，它将无法识别更改。

$(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>

你可以使用 jQuery 的函数animate()而不是添加/删除类！ 

$(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>

相关文章：