如何结合jQuery动画与css3属性，而不使用CSS转换？ [英] How to combine jQuery animate with css3 properties without using css transitions?

问题描述

在此示例中;我试图创建一个jQuery动画与css3旋转属性。我可以用css3 transition 和jQuery css（）管理这个动画，但我想用jQuery animate（）用于根据我的jQuery变量旋转deg值。

是否可以使用animate与css3属性值与jQuery 1.8 .0？

这里是jsFiddle检查

  var rotateVal = 90; 
 
 //这个方法不工作
 $（'。red'）。animate（{
'transform'：'rotate（'+ rotateVal +'deg）'
}，500）; 
 
 
 //这种方式工作，但我不想这样做转换
 $（'。black'）。css（{
'transform' ：'rotate（'+ rotateVal +'deg）'，
'transition'：'1s'
}）; 
  

html：

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

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

解决方案

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

  var red = $（。red），
 rotateVal = 90; 
 $（< div />）。animate（{
 height：rotateVal 
}，{
 duration：500，
 step：function ）{
 red.css（'transform'，'rotate（'+ now +'deg）'）; 
} 
}）; 
  

这基本上创建了一个分离的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 ，start）.animate（{
 height：end 
}，{
 duration：duration，
 step：function（now）{
 _this.css ，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（190,195,500）; 
}，750）; 
 setTimeout ; 
}，1500）; 
} 
}）; 
  

}）;

In this example; i am trying to create a jQuery animation with css3 rotate property. I can manage this animation with css3 transition and jQuery css() but i want to do this with jQuery animate() for rotating deg value according to my jQuery variatons.

Is it possible use animate with css3 property value with jQuery 1.8.0?

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>

Edit: Vendor prefixes removed, like -webkit-. Thanks to Kevin B.

解决方案

It is possible, but it isn't easy.

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

This basically creates a fake animation of a detached div, then on each step, updates the rotation of the target div.

Edit: Oops! wrong argument order. Here's a demo. http://jsfiddle.net/qZRdZ/

note that in 1.8.0 i don't think you need to specify all the vendor prefixes.

Using this method, you can animate almost anything as long as you keep in mind that things like += and -= won't work properly unless coded for.

Update: Here's a combination of my solution and cuzzea's solution abstracted behind a function. 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);
    }
});

});

这篇关于如何结合jQuery动画与css3属性，而不使用CSS转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！