web-dev-qa-db-ja.com

要素の回転をアニメートする

JQueryの.animate()で要素を回転するにはどうすればよいですか？現在不透明度を正しくアニメーション化している下の行を使用していますが、これはCSS3変換をサポートしていますか？

$(element).animate({
   opacity: 0.25,
   MozTransform: 'rotate(-' + -amount + 'deg)',
   transform: 'rotate(' + -amount + 'deg)'
});
jquerytransform
79
kalpaitch

私の知る限り、基本的なアニメーションでは数値以外のCSSプロパティをアニメーション化できません。

step 関数とユーザーのブラウザーに適したcss3変換を使用して、これを実現できると思います。 CSS3変換は、すべてのブラウザーをカバーするのに少し注意が必要です（たとえば、IE6ではMatrixフィルターを使用する必要があります）。

EDIT：ここに、Webkitブラウザー（Chrome、Safari）で機能する例があります： http://jsfiddle.net/ryleyb/ ERRmd /

IE9のみをサポートする場合は、-webkit-transformの代わりにtransformを使用できます。または、-moz-transformがFireFoxをサポートします。

使用するトリックは、気にしないCSSプロパティ（text-indent）をアニメーション化し、その値をステップ関数で使用して回転を行うことです。

$('#foo').animate(
..
step: function(now,fx) {
  $(this).css('-webkit-transform','rotate('+now+'deg)'); 
}
...
93
Ryley

ライリーの答え は素晴らしいですが、要素内にテキストがあります。テキストを他のすべてと一緒に回転させるために、text-indentの代わりにborder-spacingプロパティを使用しました。

また、少し明確にするために、要素のスタイルで、初期値を設定します。

#foo {
    border-spacing: 0px;
}

次に、アニメーションチャンクで、最終的な値：

$('#foo').animate({  borderSpacing: -90 }, {
    step: function(now,fx) {
      $(this).css('transform','rotate('+now+'deg)');  
    },
    duration:'slow'
},'linear');

私の場合、反時計回りに90度回転します。

こちらがライブデモです 。

75
atonyc

私の意見では、jQueryのanimateは、2Dまたは3Dプロパティでそのようなアニメーションを実行するCSS3 transitionと比較して、少し使い古されています。また、ブラウザに任せて JavaScriptというレイヤーを忘れることでCPUジュースを節約できる -特に、アニメーションでブラストしたい場合は。 JavaScriptで機能を定義するなので、スタイル定義が存在するアニメーションを作成するのが好きです。 JavaScriptに挿入するプレゼンテーションが多いほど、後で直面する問題が多くなります。

あなたがしなければならないのは、CSS addClassプロパティを持つクラスを設定するアニメーション化したい要素にtransitionを使用することです。 アニメーションを単に「アクティブ化」、これは純粋なプレゼンテーションレイヤーに実装のままです。

。js

// with jQuery
$("#element").addClass("Animate");

// without jQuery library
document.getElementById("element").className += "Animate";

jQueryでクラスを削除 、または ライブラリなしでクラスを削除 を簡単に実行できます。

。css

#element{
    color      : white;
}

#element.Animate{
    transition        : .4s linear;
    color             : red;
    /** 
     * Not that ugly as the JavaScript approach.
     * Easy to maintain, the most portable solution.
     */
    -webkit-transform : rotate(90deg);
}

。html

<span id="element">
    Text
</span>

これは、ほとんどのユースケースに対応した高速で便利なソリューションです。

また、異なるスタイリング（代替CSSプロパティ）を実装し、グローバルな.5sアニメーションでオンザフライでスタイルを変更したい場合にもこれを使用します。 BODYに新しいクラスを追加しますが、次のような形式の代替CSSがあります。

。js

$("BODY").addClass("Alternative");

。css

BODY.Alternative #element{
    color      : blue;
    transition : .5s linear;
}

これにより、異なるCSSファイルをロードせずに、アニメーションに異なるスタイルを適用できます。 classを設定するには、JavaScriptのみを使用します。

47
Dyin

Ryleyとatonycの回答に追加するために、実際にはtext-indexやborder-spacingなどの実際のCSSプロパティを使用する必要はありませんが、代わりにrotationやmy-awesome-propertyなどの偽のCSSプロパティを指定できます。将来的に実際のCSSプロパティになるリスクのないものを使用することをお勧めします。

また、誰かが他の物を同時にアニメーション化する方法を尋ねました。これは通常どおり行うことができますが、アニメーション化されたプロパティごとにstep関数が呼び出されるため、次のようにプロパティを確認する必要があります。

$('#foo').animate(
    {
        opacity: 0.5,
        width: "100px",
        height: "100px",
        myRotationProperty: 45
    },
    {
        step: function(now, tween) {
            if (tween.prop === "myRotationProperty") {
                $(this).css('-webkit-transform','rotate('+now+'deg)');
                $(this).css('-moz-transform','rotate('+now+'deg)'); 
                // add Opera, MS etc. variants
                $(this).css('transform','rotate('+now+'deg)');  
            }
        }
    });

（注：jQueryドキュメントで「Tween」オブジェクトのドキュメントを見つけることができません。 アニメーションドキュメントページ から http：//api.jquery。へのリンクがあります。 com/Types＃Tween 存在しないように見えるセクションGithubでTweenプロトタイプのコードを見つけることができます here ）。

17
skagedal

CSSトランジションを使用するだけです：

$(element).css( { transition: "transform 0.5s",
                  transform:  "rotate(" + amount + "deg)" } );

setTimeout( function() { $(element).css( { transition: "none" } ) }, 500 );

例として、アニメーションの継続時間を0.5秒に設定します。

アニメーションが終了した後（500ミリ秒）setTimeout cssプロパティを削除するには、transitionに注意してください。

読みやすくするために、ベンダープレフィックスを省略しました。

このソリューションには、ブラウザーの移行サポートが必要です。

6
Paolo

私はこの記事を偶然見つけて、jQueryでCSS変換を使用して無限ループアニメーションを作成しようとしていました。これは私にとってはうまくいきました。しかし、それがどれほどプロフェッショナルかはわかりません。

function progressAnim(e) {
    var ang = 0;

    setInterval(function () {
        ang += 3;
        e.css({'transition': 'all 0.01s linear',
        'transform': 'rotate(' + ang + 'deg)'});
    }, 10);
}

使用例：

var animated = $('#elem');
progressAnim(animated)
3
Faradin
//this should allow you to replica an animation effect for any css property, even //properties //that transform animation jQuery plugins do not allow

            function twistMyElem(){
                var ball = $('#form');
                document.getElementById('form').style.zIndex = 1;
                ball.animate({ zIndex : 360},{
                    step: function(now,fx){
                        ball.css("transform","rotateY(" + now + "deg)");
                    },duration:3000
                }, 'linear');
            }
1
Colin Rickels