6

この例では; css3 回転プロパティを使用して jQuery アニメーションを作成しようとしています。このアニメーションは css3transitionと jQueryで管理できますが、jQuery バリエーションに従って角度値を回転させるためcss()に jQuery でこれを行いたいと考えています。animate()

jQuery 1.8.0でcss3プロパティ値でanimateを使用することは可能ですか?

検査する 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 に答える