如何结合使用jQuery的CSS3属性的动画，而无需使用CSS过渡？(How to combine

在这个例子中; 我想创建一个jQuery动画与CSS3旋转属性。 我可以管理这个动画与CSS3 transition和jQuery css()但我想这样做与jQuery animate()根据我的jQuery variatons旋转度值。

是否有可能使用与动画的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- 。 感谢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:

凯文是corect差不多。 :)

在这里工作的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，所以阶跃函数会给你的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/

文章来源: How to combine jQuery animate with css3 properties without using css transitions?