当我单击两次css3转换不起作用时
[英]when I click twice css3 transform is not working
问题描述
单击开始按钮时我想旋转正方形。但是：
当我单击一次，它正在工作。 当我运行两次时，此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>
2 个解决方案
解决方案1
2 已采纳 2016-07-07 06:47:40
您需要在删除和添加类之间设置超时。 否则它将无法识别更改。
$(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>
解决方案2
1 2016-07-07 06:49:23
除了添加/删除类，您还可以使用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>
CSS3 Transition + Transform属性在IE的早期版本中不起作用？
[英]Css3 Transition+Transform property not working in Earlier version of IE?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.