jquery - 让 CSS Transition 发生不止一次？

Question

目前我有一个简单的圆形 Logo ，当某些 ajax 函数出现时，我还确保此 div 旋转 360 度。

它确实如我所愿地工作，但它只会在触发函数后发生一次，然后我必须重新加载页面才能使其再次工作。

只要函数 spin_logo() 被触发，我如何让旋转起作用？

旋转函数

function spin_logo(){

    var n = 360;
    $('.logo').css({
        transform:'rotate('+n+'deg)',
        '-ms-transform':'rotate('+n+'deg)',
        '-moz-transform':'rotate('+n+'deg)',
        '-o-transform':'rotate('+n+'deg)',
        transition: '1s linear',
        '-ms-transition':'1s linear',
        '-moz-transition':'1s linear',
        '-o-transition':'1s linear'            
    });
    n+=360;

}

旋转用例

spin_logo() 发生在 success 函数之后。

$(document).on('click touchstart', '.publish', function(event){
    event.preventDefault();
    var $this = $(this);

        $.ajax({
             type: "POST",
             url: base_url + "post/publish",
             dataType: "text",  
             data: {
                title: $('.title').html(),
                sub: $('.sub-title').html(),
                txt: $('.editor').html(),
                cat_str: $('#cat-drop').val(),
                str: window.location.pathname.split('/').pop()
             },
             cache:false,
             success: 
              function(data){
                spin_logo();
                $('.response-info').slideToggle(500);
                $('.response-info').html(data).fadeIn(500);   
                setTimeout(function(){
                    $('.response-info').slideToggle(1000);
                }, 10000);    
            }       

         });                

    return false;
});

提前致谢。

Answer 1

这里的问题是“旋转(360 度)”与“旋转(720 度)”相同。浏览器采用 mod 360 度数，因此，在第一次转换之后，transform 属性根本没有改变，什么也没有发生。

您必须在完成动画后删除转换。您可以使用 transitionEnd 事件来实现这一点。你可以看到它在这里工作:http://jsfiddle.net/8rXMw

  var $logo = $('.logo');
  $logo.on('transitionend', function() {
     $logo.removeClass('rotated');
  });

  $('#button').on('click', function() {
    $logo.addClass('rotated');
  });

这段代码所做的是将旋转类添加到包含变换和动画的 div。转换完成后，transitionEnd 将触发并删除该类。这样，div 返回到 rotate(0) 但没有过渡。当您再次单击该按钮时，将重复相同的过程。

请注意，某些浏览器支持“transitionEnd”前缀。