Question

在这个例子中;我正在尝试使用css3 rotate属性创建一个jQuery动画。我可以使用css3 transition和jQuery css()来管理这个动画，但我想用jQuery animate()来根据我的jQuery variatons旋转deg值。

是否可以使用jQuery 1.8.0的css3属性值进行动画处理？

Here is jsFiddle to inspect.

jQuery的：

var rotateVal = 90;

//this method isn't working
$('.red').animate({
    'transform':'rotate('+rotateVal+'deg)'
},500);


//this way works but i don't want to do this with transitions
$('.black').css({
    'transform':'rotate('+rotateVal+'deg)',
    'transition':'1s'
});

HTML：

<span class="black"></span>
<span class="red"></span>

编辑：删除了供应商前缀，例如-webkit-。感谢Kevin B.

Answer 1

这是可能的，但这并不容易。

var red = $(".red"),
    rotateVal = 90;
$("<div />").animate({
    height: rotateVal
},{
    duration: 500,
    step: function(now){
        red.css('transform','rotate('+now+'deg)');
    }
});

这基本上会创建一个分离div的假动画，然后在每一步上更新目标div的旋转。

编辑：哎呀！错误的参数顺序。这是一个演示。 http://jsfiddle.net/qZRdZ/

请注意，在1.8.0中，我认为您不需要指定所有供应商前缀。

使用此方法，您可以动画几乎所有内容，只要您记住+=和-=之类的内容无法正常工作，除非编码。

更新：以下是我的解决方案和cuzzea在功能背后抽象的解决方案的组合。 http://jsfiddle.net/qZRdZ/206/

$.fn.rotate = function(start, end, duration) {
    console.log(this);
    var _this = this;
    var fakeDiv = $("<div />");
    _this.promise().done(function(){
        _this.animate({"a":end},{duration:duration});
        fakeDiv.css("height", start).animate({
            height: end
        }, {
            duration: duration,
            step: function(now) {
                _this.css("transform", "rotate(" + now + "deg)");
            },
            complete: function() {
                fakeDiv.remove();
            }
        });
    });

    return _this;
};

var red = $('.red');
red.click(function() {
    if ( !$(this).is(':animated') ) {

        red.rotate(45,135,500);
        setTimeout(function(){
            red.rotate(135,190,500);
        },750);
        setTimeout(function(){
            red.rotate(190,45,500);
        },1500);
    }
});

}）;

Answer 2

凯文几乎是核心。：）

Here is working jsFiddle.

您不必使用其他元素和高度，您可以执行以下操作：

var red = $('.red'),
max_rot = 45,
start_from = 90;

red.css({a:0}).animate(
    {'a':1},
    { step: function(value,tweenEvent)
       {
         rotateVal = start_from + max_rot * value;
         red.css({
           'transform':'rotate('+rotateVal+'deg)',
         });
       }
     },
1000);

ideea很简单。首先我们创建一个伪造的css属性'a'并将其设置为0，然后我们将其设置为1，这样step函数将为您提供一个0到1的值，您可以使用它来设置自定义变换。

Answer 3

另一种方法是使用jQuery将dom更改为css将响应的内容。

我们可以将我们的CSS设置为：

.object {
    -webkit-transition:all .4s;
    -moz-transform:all .4s;
    -o-transform:all .4s;
    -ms-transform:all .4s;
    transform:all .4s;
}
.object[data-rotate="false"] {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
}
.object[data-rotate="true"] {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}

我们的jQuery看起来像这样：

$('#trigger').live('click',function(){
    if($('.object').attr('data-rotate') = true) {
        $('.object').attr('data-rotate',false);
    }
    else {
        $('.object').attr('data-rotate', true);
    }
});

显然，浏览器必须支持转换你想要运行的任何动画的能力，所以它的命中或错过取决于动画的类型，但如果你有大量的东西，或者它有更好的工作你有一些孩子想要同时制作动画。

示例小提琴： http://jsfiddle.net/ddhboy/9DHDy/1/

如何在不使用css转换的情况下将jQuery动画与css3属性结合起来？

3 个答案: