twitter-bootstrap 单击时动画 Glyphicon
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22502598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animating Glyphicon on click
提问by Raghavendra
I am trying to animate a glyphicon-refreshicon so that when I click on the icon it should rotate. I am trying to do this using CSS3, but it is not working properly.
我正在尝试为glyphicon-refresh图标设置动画，以便当我点击图标时它应该旋转。我正在尝试使用 CSS3 来做到这一点，但它无法正常工作。
Here is my markup:
这是我的标记：
<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>
Here is my css:
这是我的CSS：
<style>
.glyphicon-refresh-animate {
animation-name: rotateThis;
animation-duration: .5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes "rotateThis" {
from { transform: scale( 1 ) rotate( 0deg ); }
to { transform: scale( 1 ) rotate( 360deg ); }
}
</style>
Here is my JS:
这是我的JS：
<script type="text/javascript">
$( document ).ready( function() {
$( "#update" ).on( "click", function( e ) {
var $icon = $( this ).find( ".glyphicon glyphicon-refresh" ),
animateClass = "glyphicon-refresh-animate";
$icon.addClass( animateClass );
// setTimeout is to indicate some async operation
window.setTimeout( function() {
$icon.removeClass( animateClass );
}, 2000 );
});
});
</script>
Any help, or an alternative approach, would be appreciated.
任何帮助或替代方法，将不胜感激。
回答by idmean
First: Your jQuery selector is wrong:
第一：你的 jQuery 选择器是错误的：
.glyphicon glyphicon-refresh
has to be
必须
.glyphicon.glyphicon-refresh
Second: You should prefix all animateproperties, the keyframeskeyword and the transformproperty with vendor prefixes. (Only Firefox and IE10+ support without prefix. http://caniuse.com/#feat=css-animation) For example for Safari and Chrome:
第二：您应该为所有animate属性、keyframes关键字和transform属性加上供应商前缀。（只有Firefox和IE10 +支持不带前缀。http://caniuse.com/#feat=css-animation）例如，对于Safari和Chrome：
.glyphicon-refresh-animate {
-webkit-animation-name: rotateThis;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes "rotateThis" {
from {
-webkit-transform: rotate( 0deg );
}
to {
-webkit-transform: rotate( 360deg );
}
}
http://jsfiddle.net/DX4AJ/This fiddle only works in Safari and Chrome!
http://jsfiddle.net/DX4AJ/这个小提琴只适用于 Safari 和 Chrome！
