我正在尝试为 glyphicon-refresh
图标制作动画,这样当我点击该图标时它应该会旋转。我正在尝试使用 CSS3 执行此操作,但它无法正常工作。
这是我的标记:
<a id="update" href="#"><i class="glyphicon glyphicon-refresh"></i></a>
这是我的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>
这是我的 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>
如有任何帮助或替代方法,我们将不胜感激。
最佳答案
首先:你的 jQuery 选择器是错误的:
.glyphicon glyphicon-refresh
必须是
.glyphicon.glyphicon-refresh
其次:您应该为所有 animate
属性、keyframes
关键字和 transform
属性加上 vendor 前缀。 (仅 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/这个 fiddle 只适用于 Safari 和 Chrome!
关于javascript - 单击动画 Glyphicon,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22502598/