6

在这个例子中；我正在尝试使用 css3 旋转属性创建一个 jQuery 动画。我可以用 css3transition和 jQuery管理这个动画，css()但我想用 jQueryanimate()来根据我的 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-. 感谢凯文 B。

4

3 回答 3

6

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

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

});

于 2012-08-21T20:55:12.303 回答
3

凯文几乎是正确的。:)

这是工作的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 的值，您可以使用它来设置自定义变换。

于 2012-08-25T19:31:48.803 回答
0

另一种方法是使用 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/

于 2013-01-08T16:24:10.600 回答