如何在不使用CSS过渡的情况下将jQuery动画与CSS3属性结合在一起？

一尘不染

如何在不使用CSS过渡的情况下将jQuery动画与CSS3属性结合在一起？

css

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

可以在jQuery 1.8.0中使用具有CSS3属性值的动画吗？

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-。感谢KevinB。

阅读 273

2020-05-16

共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的解决方案在一个函数之后抽象的组合。

$.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);
    }
});

}）;

2020-05-16