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

Question

在本例中，我试图创建一个具有jQuery旋转属性的css3动画。我可以使用css3 transition和jQuery css()来管理这个动画，但是我想使用jQuery animate()来根据我的jQuery变量旋转deg值。

是否可以使用带有css3属性值的jQuery 1.8.0动画？

这是要检查的jsFiddle。

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-。多亏了凯文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

凯文差一点就回来了。:)

这是工作的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);​

伊迪卡很简单。首先，我们创建一个伪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/