Question

目前我有一个简单的圆形徽标，当发生某些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;

}

ROTATION USE CASE

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

提前致谢。

Answer 1

这里的问题是'rotate（360deg）'与'rotate（720deg）'相同。浏览器采用mod 360度，因此，在第一次转换之后，转换属性根本没有改变，没有任何反应。

完成动画后，您必须删除变换。您可以使用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返回旋转（0）但没有转换。再次单击该按钮时，将重复相同的过程。

请注意，某些浏览器中的前缀支持'transitionEnd'。

Answer 2

这可以大大简化，但是使用css用于动画目的，jQuery用于添加删除类。

<强> Here

.animate {
    -webkit-animation:rotate 2s infinite linear forwards;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform:rotate(0deg);
    }
    100% {
        -webkit-transform:rotate(360deg);
    }
}

使CSS转换不止一次发生？

2 个答案: