javascript - 单击动画 Glyphicon

Question

我正在尝试为 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>

如有任何帮助或替代方法，我们将不胜感激。

Answer 1

首先:你的 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!