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

Question

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

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

这是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-.感谢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);
    }
});

});