使用jquery.animate()的CSS旋转交叉浏览器

Question

我正在创建一个跨浏览器兼容的旋转(ie9 +),我在jsfiddle中有以下代码

$(document).ready(function () { 
    DoRotate(30);
    AnimateRotate(30);
});

function DoRotate(d) {

    $("#MyDiv1").css({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform': 'rotate('+d+'deg)'
     });  
}

function AnimateRotate(d) {

        $("#MyDiv2").animate({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform':'rotate('+d+'deg)'
     }, 1000); 
}

CSS和HTML非常简单,仅用于演示:

.SomeDiv{
    width:50px;
    height:50px;       
    margin:50px 50px;
    background-color: red;}

<div id="MyDiv1" class="SomeDiv">test</div>
<div id="MyDiv2" class="SomeDiv">test</div>

使用时旋转有效,使用时.css()无效.animate(); 为什么这样,有没有办法解决它？

谢谢.

Answer 1

但是,使用jQuery无法使用CSS-Transforms进行动画制作.你可以这样做:

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#MyDiv2');

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

您可以在此处阅读有关步骤回调的更多信息:http://api.jquery.com/animate/#step

http://jsfiddle.net/UB2XR/23/

而且,顺便说一句:你不需要使用jQuery 1.7+为css3转换添加前缀

更新

你可以将它包装在一个jQuery插件中,让你的生活更轻松:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  return this.each(function() {
    var $elem = $(this);

    $({deg: 0}).animate({deg: angle}, {
      duration: duration,
      easing: easing,
      step: function(now) {
        $elem.css({
           transform: 'rotate(' + now + 'deg)'
         });
      },
      complete: complete || $.noop
    });
  });
};

$('#MyDiv2').animateRotate(90);

http://jsbin.com/ofagog/2/edit

UPDATE2

我对它进行了优化以使其有序easing,duration并且complete无关紧要.

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

更新2.1

感谢matteothis在完整中注意到-context 的问题callback.如果通过在每个节点上绑定回调来修复它jQuery.proxy.

我在Update 2之前已将该版本添加到代码中.

更新2.2

如果您想要执行诸如来回切换旋转之类的操作,则可以进行此修改.我只是在函数中添加了一个start参数并替换了这一行:

$({deg: start}).animate({deg: angle}, args);

如果有人知道如何使所有用例更通用,无论他们是否想要设置起始度,请进行适当的编辑.

用法^{......很简单!}

主要是你有两种方法可以达到预期的效果.但首先,让我们来看看这些论点:

jQuery.fn.animateRotate(angle, duration, easing, complete)

除"angle"外,所有这些都是可选的,并且回jQuery.fn.animate退到默认的-properties:

duration: 400
easing: "swing"
complete: function () {}

1

这种方式很短,但看起来有点不清楚我们传递的参数越多.

$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});

第2

如果有三个以上的参数,我更喜欢使用对象,所以这个语法是我的最爱:

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

Answer 2

谢谢yckart!伟大的贡献.我充实了你的插件.添加了startAngle以实现完全控制和跨浏览器css.

$.fn.animateRotate = function(startAngle, endAngle, duration, easing, complete){
    return this.each(function(){
        var elem = $(this);

        $({deg: startAngle}).animate({deg: endAngle}, {
            duration: duration,
            easing: easing,
            step: function(now){
                elem.css({
                  '-moz-transform':'rotate('+now+'deg)',
                  '-webkit-transform':'rotate('+now+'deg)',
                  '-o-transform':'rotate('+now+'deg)',
                  '-ms-transform':'rotate('+now+'deg)',
                  'transform':'rotate('+now+'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

Answer 3

如果你通过jQuery处理CSS3动画,jQuery传输可能会让你的生活更轻松.

编辑2014年3月 (因为自我发布以来,我的建议一直在上下投票)

让我解释为什么我最初暗示上面的插件:

在性能方面,更新DOM每个步骤(即$.animate)并不理想.它可以工作,但很可能比纯CSS3过渡或CSS3动画慢.

这主要是因为如果您指出从开始到结束的过渡情况,浏览器就有机会提前考虑.

为此,您可以为转换的每个状态创建一个CSS类,并仅使用jQuery切换动画状态.

这通常非常简洁,因为您可以与CSS的其余部分一起调整动画,而不是将其与业务逻辑混合:

// initial state
.eye {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   transform: rotate(45deg);
   // etc.

   // transition settings
   -webkit-transition: -webkit-transform 1s linear 0.2s;
   -moz-transition: -moz-transform 1s linear 0.2s;
   transition: transform 1s linear 0.2s;
   // etc.
}

// open state    
.eye.open {

   transform: rotate(90deg);
}

// Javascript
$('.eye').on('click', function () { $(this).addClass('open'); });

如果任何变换参数是动态的,您当然可以使用style属性:

$('.eye').on('click', function () { 
    $(this).css({ 
        -webkit-transition: '-webkit-transform 1s ease-in',
        -moz-transition: '-moz-transform 1s ease-in',
        // ...

        // note that jQuery will vendor prefix the transform property automatically
        transform: 'rotate(' + (Math.random()*45+45).toFixed(3) + 'deg)'
    }); 
});

关于MDN上CSS3过渡的更多详细信息.

但是还有一些其他的事情需要记住,如果你有复杂的动画,链接等等,所有这些都会变得有点棘手,jQuery Transit只是做了所有棘手的事情:

$('.eye').transit({ rotate: '90deg'}); // easy huh ?