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

单击“开始”按钮时，我需要方形旋转。但是：

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

$（函数（）{
var$obj=$（“.red”）；
$（“#btnStart”）。在（“单击”，函数（）{
$obj.removeClass（“运行”）.addClass（“运行”）；
});
});
body{padding:100px；}
.red{背景：f00；宽度：100px；高度：100px；}
.跑{
变换：旋转（3600度）；
转换：转换5s到0s；
-moz转换：转换5s到0s；
-webkit转换：转换5s到0s；
-o-转变：转变5s-0s；
}



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


$（函数（）{
var$obj=$（“.red”）；
$（“#btnStart”）。在（“单击”，函数（）{
$obj.removeClass（“运行”）；
setTimeout（函数（）{
$obj.addClass（“运行”）；
}, 10);
});		
});
body{padding:100px；}
.red{背景：f00；宽度：100px；高度：100px；}
.跑{
变换：旋转（3600度）；
转换：转换5s到0s；
-moz转换：转换5s到0s；
-webkit转换：转换5s到0s；
-o-转变：转变5s-0s；
}



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


$（函数（）{
var$obj=$（“.red”）；
$（“#btnStart”）。在（“单击”，函数（）{
$obj.removeClass（“运行”）；
setTimeout（函数（）{
$obj.addClass（“运行”）；
}, 10);
});		
});
body{padding:100px；}
.red{背景：f00；宽度：100px；高度：100px；}
.跑{
变换：旋转（3600度）；
转换：转换5s到0s；
-moz转换：转换5s到0s；
-webkit转换：转换5s到0s；
-o-转变：转变5s-0s；
}



开始旋转
您可以使用jQuery的
animate（）
函数，而不是添加/删除类


$（函数（）{
var$obj=$（“.red”）；
$（“#btnStart”）。单击（函数（）{
$（'.red'）。设置动画（{borderSpacing:-3600}{
步骤：函数（现在，fx）{
$（this）.css（'-webkit transform'，rotate（'+now+'deg'）；
$（this）.css（'-moz transform'，rotate（'+now+'deg'）；
$（this.css（'transform'，'rotate（'now+'deg'）；
},
持续时间：'慢'
}“线性”）；
});
});
body{padding:100px；}
.red{背景：f00；宽度：100px；高度：100px；}



开始旋转
您可以使用jQuery的
animate（）
函数，而不是添加/删除类


$（函数（）{
var$obj=$（“.red”）；
$（“#btnStart”）。单击（函数（）{
$（'.red'）。设置动画（{borderSpacing:-3600}{
步骤：函数（现在，fx）{
$（this）.css（'-webkit transform'，rotate（'+now+'deg'）；
$（this）.css（'-moz transform'，rotate（'+now+'deg'）；
$（this.css（'transform'，'rotate（'now+'deg'）；
},
持续时间：'慢'
}“线性”）；
});
});
body{padding:100px；}
.red{背景：f00；宽度：100px；高度：100px；}



开始旋转
因为在两次单击中，
$obj
具有
红色
类<代码>$obj.removeClass（“运行”）.addClass（“运行”）这并没有多大作用。它会在删除类后立即添加该类。因此，在状态转换发生之前，它开始返回到当前的原始状态。非常感谢您。因为在两次单击中，
$obj
具有
红色
类<代码>$obj.removeClass（“运行”）.addClass（“运行”）这并没有多大作用。它会在删除类后立即添加该类。所以，在状态转换发生之前，它开始返回到原始状态，这就是它当前所处的状态。非常感谢你。不幸的是，切换需要在第二次运行时按两次按钮。哦，是的，我的错。我没看到你的答案！是的，我发现了。也许使用setTimeout是一个好方法。但是我非常感谢你。我更新了我的答案。请再读一遍，告诉我你的想法。我认为这是比添加/删除类更好的解决方案。性能缺点我更喜欢css，但是的，这是一个很酷的答案，我会给你一个+1，因为你付出了努力：）不幸的是，切换需要在第二次按下按钮两次。哦，是的，我的错。我没看到你的答案！是的，我发现了。也许使用setTimeout是一个好方法。但是我非常感谢你。我更新了我的答案。请再读一遍，告诉我你的想法。我认为这是比添加/删除类更好的解决方案。性能副作用我更喜欢css，但是的，这是一个很酷的答案，我会给你一个+1，因为你付出了努力：）实际上只是简单地阅读
$obj[0]。offsetHeight类间更改将刷新CSS并识别更改。您不需要
setTimeout
@SpencerWieczorek ok，很高兴知道这一点。我其实不知道，谢谢。OP可以选择使用它：）实际上只需读取
$obj[0]类间更改将刷新CSS并识别更改。您不需要
setTimeout
@SpencerWieczorek ok，很高兴知道这一点。我其实不知道，谢谢。OP可以选择使用该选项：）