問題描述

我正在創建一個跨瀏覽器兼容的旋轉 (ie9+)，我在 jsfiddle 中有以下代碼

I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a 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 非常簡單，僅用于演示:

The CSS and HTML are really simple and just for demo:

.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() 時無效；為什么會這樣?有辦法解決嗎?

The rotation works when using .css() but not when using .animate(); why is that and is there a way to fix it?

謝謝.

推薦答案

目前尚無法使用 jQuery 制作 CSS-Transforms 動畫.你可以這樣做:

CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this:

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

您可以在此處閱讀有關 step-callback 的更多信息:http://api.jquery.com/動畫/#step

You can read more about the step-callback here: http://api.jquery.com/animate/#step

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

而且，順便說一句:您不需要為 jQuery 1.7+ 的 css3 轉換添加前綴

And, btw: you don't need to prefix css3 transforms with jQuery 1.7+

您可以將其包裝在一個 jQuery 插件中，讓您的生活更輕松:

You can wrap this in a jQuery-plugin to make your life a bit easier:

$.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

我對其進行了一些優化，以使 easing、duration 和 complete 的順序無關緊要.

I optimized it a bit to make the order of easing, duration and complete insignificant.

$.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

感謝 matteo誰注意到完整-callback 中的this-context 存在問題.如果通過 binding 在每個節點上使用 jQuery.proxy 的回調來修復它.

Update 2.1

Thanks to matteo who noted an issue with the this-context in the complete-callback. If fixed it by binding the callback with jQuery.proxy on each node.

我在 Update 2 之前已將版本添加到代碼中.

I've added the edition to the code before from Update 2.

如果您想要執行諸如來回切換旋轉之類的操作，這是一個可能的修改.我只是在函數中添加了一個 start 參數并替換了這一行:

This is a possible modification if you want to do something like toggle the rotation back and forth. I simply added a start parameter to the function and replaced this line:

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

如果有人知道如何使其對所有用例更通用，無論他們是否想設置起始學位，請進行適當的編輯.

If anyone knows how to make this more generic for all use cases, whether or not they want to set a start degree, please make the appropriate edit.

主要有兩種方法可以達到預期的結果.但首先，讓我們看一下論據:

Mainly you've two ways to reach the desired result. But at the first, let's take a look on the arguments:

jQuery.fn.animateRotate(角度、持續時間、緩動、完成)

除了角度"之外，它們都是可選的并且回退到默認的jQuery.fn.animate-properties:

Except of "angle" are all of them optional and fallback to the default jQuery.fn.animate-properties:

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

第一個

這種方式比較短，但是傳入的參數越多看起來就有點不清楚了.

1st

This way is the short one, but looks a bit unclear the more arguments we pass in.

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

第二次

如果參數超過三個，我更喜歡使用對象，所以我最喜歡這種語法:

2nd

I prefer to use objects if there are more than three arguments, so this syntax is my favorit:

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

這篇關于帶有 jquery.animate() 的 CSS 旋轉跨瀏覽器的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！