jquery - 使CSS转换发生不止一次？

目前，我有一个简单的圆形徽标，当某些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（）仅在成功函数之后出现。

$(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;
});

提前致谢。

最佳答案

这里的问题是“旋转（360度）”与“旋转（720度）”相同。浏览器采用度数为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'。