让 CSS 转换不止一次？答案

【问题标题】：Making CSS Transition Occur More than One Time?让 CSS 转换不止一次？
【发布时间】：2014-04-02 00:43:28
【问题描述】：

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

提前致谢。

【问题讨论】：

标签： jquery css transform css-transitions

【解决方案1】：

这里的问题是'rotate(360deg)' 和'rotate(720deg)' 是一样的。浏览器采用 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”。

【讨论】：

【解决方案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);
    }
}

【讨论】：