CSS3アニメーションが簡単に書けるjQuery Transit

step1 jQueryプラグインの読み込み

　jQuery TransitはjQuery1.4以降でのみ動作します。jQuery1.4以降をjQueryの公式サイトから、jQuery Transitを配布ページからダウンロードします。ページ中央のDOWNLOADボタンの上で右クリックし、リンク先を保存します。

　jQuery TransitはGitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。プラグイン配布ページでダウンロードするとminify（圧縮）されているので、プラグインの中身を見たい場合はGitHubでダウンロードしましょう。

　利用するWebページの body の閉じタグ直前で、jQuery本体と「jquery.transit.min.js」を読み込みます。

//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.transit.min.js"></script>
</body>
//(中略)

　これで準備はOKです。

step2 基本的な使い方

　実際のプラグインの使い方を説明します。

　jquery.transit.min.js を読み込んだ後、transition()メソッドを実行します。transition()メソッドは、使用したい要素をセレクターで指定し、.(ドット)繋ぎで指定します。下の例では「js-transit-el」というclass名を持つ要素にアニメーションを適用します。

JavaScript

//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.transit.min.js"></script>
<script>
$(function(){
    $('.js-transit-el').transition();
});
</script>
</script>
//(中略)

　実際のアニメーションの指定は、transition({...})内に、CSSのプロパティ名と値を:（コロン）区切りで書きます。

　たとえば、指定した要素を右に50px動作させるには以下のように指定します。

JavaScript

//(中略)
<script src="jquery.min.js"></script>
<script src="jquery.transit.min.js"></script>
<script>
$(function(){
    $('.js-transit-el').transition({
        // 右に50px移動
        translate: [50]
    });
});
//(中略)

　transition({...})内には、CSS transitionが対応しているプロパティが指定できます。代表的なプロパティとしては以下があります。

x(px)	y (px)	translate (x, y)
rotate (deg)	rotateX (deg)	rotateY (deg)
rotate3d (x, y, z, deg)	scale (x, [y])	perspective (px)
skewX (deg)	skewY (deg)	opacity
margin	height	delay
transform

　HTMLは、アニメーションさせたい要素に、transition（）メソッドのセレクターに指定したclass名を付けます。例では、「js-transit-el」を付与します。

HTML

//(中略)
<div class="js-transit-el"></div>
//(中略)

　基本的な機能が実装できました。以下の動画のようになれば成功です。

step3 アニメーションのカスタマイズ

　transitionメソッドは複数のCSSプロパティの値を指定してカスタマイズできます。CSSプロパティは以下のように指定します。

透明度と高さをアニメーション

　透明度を指定するCSSプロパティ「opacity」と、高さを指定するプロパティ「height」を指定します。以下のように指定すると、透明度は0.5になり、高さは300pxにスムーズに変化します。

JavaScript

//(中略)
$(function(){
    $('.js-transit-el').transition({
        // 透明度を0.5に変更
        opacity: .5,
        // 高さを300pxに変更
        height: '300px'
    });
});
//(中略)

指定秒数後にアニメーション

　指定数秒後にアニメーションを実行するには、transition()メソッドに、カンマ区切りで秒数をms(ミリ秒)で指定します。前項のアニメーションを、1000ms(1秒)の経過後に実行するには以下のように指定します。

JavaScript

//(中略)
$(function(){
    $('.js-transit-el').transition({
        opacity: .5,
        //カンマ区切りで実行までの秒数指定
        height: '300px'}, 1000);
    });
//(中略)

　これで、イベント発生のタイミング（デフォルトでは読み込み時）から1000ms後にアニメーションが実行されます。

アニメーション後にスクリプトの実行をする

　特定のアニメーションが終了してから別のスクリプトを実行するには、transition()メソッドにコールバック関数を指定します。以下は、transition()メソッドで指定したアニメーションが終わってからアラートを表示する例です。

JavaScript

//(中略)
$(function(){
    $('.js-transit-el').transition({
        opacity: .5
    }, function() {
        alert(“Success!!!")
    });
});
//(中略)

　これで、透明度が変わった後に、アラートが表示されます。

アニメーションの変化スピードをカスタマイズ

　アニメーションの変化の度合い（イージング）を変更するには、コールバック関数と同様、transition()メソッドにeasingの値を指定します。

JavaScript

//(中略)
$(function(){
    $('.js-transit-el').transition({
        // 45度回転させる
        rotate: '45deg'
    }, 'in');
});
//(中略)

　ここでは、「in」を指定していますが、ほかにもさまざまなeasingの値があります。それぞれの動きはデモページで確認できますので、好みのイージングを探してください。

linear	ease	in
out	in-out	snap
easeOutCubic	easeInOutCubic	easeInCirc
easeOutCirc	easeInOutCirc	easeInExpo
easeOutExpo	easeInOutExpo	easeInQuad
easeOutQuad	easeInOutQuad	easeInQuart
easeOutQuart	easeInOutQuart	easeInQuint
easeInOutSine	easeInBack	easeOutBack
easeInOutBack	easeOutQuint	easeInOutQuint
easeInSine	easeOutSine

複数のアニメーション処理を連続して実行

　複数のアニメーション処理を連続して実行したいときは、transition()メソッドをメソッドチェーンで記述します。記述した順番通りに処理が実行されます。

JavaScript

//(中略)
$(function(){
    $('.js-transit-el')
    .transition({
        // 透明度を0.5に変更
        opacity: .5
    })
    .transition({
        // 左に40px移動
        x: -40
    })
    .transition({
        // 縦方向に30度変形
        skewY: '30deg'
    });
});
//(中略)

　複数のアニメーションを次々に実行していけば、複雑な動きも可能になりますね！

マウスオーバーによるアニメーション

　デフォルトでは読み込み時に指定したアニメーションが実行されますが、マウスオーバー時にアニメーションを実行したい場合には、hoverイベントを指定します。

JavaScript

//(中略)
$(".js-transit-el").hover(
    function() {
        $(this).transition({
            // マウスを載せたときの処理　大きさを2倍に変形
            scale: 2
        });
    },
    function() {
        $(this).transition({
            // マウスを外したときの処理　大きさを1倍に変形
            scale: 1
        });
    }
);
//(中略)

　上の例は、2つの動きを指定しています。最初の指定で、マウスオーバーのイベント発生時に実行する処理を、2番目の指定でマウスアウト時に実行する処理を記述しています。これで、マウスを乗せると大きさが2倍になり、マウスを外すと元に戻ります。

実行アニメーションの停止

　前項のマウスオーバーのイベントを実際に使ってみると、以下の動画のように複数回イベントが発生したときにその回数分処理が実行されてしまいます。

　回避するため、要素に対してstop()メソッドを利用します。

JavaScript

//(中略)
$(".js-transit-el").hover(
    function() {
        $(this).transition({
            // マウスを載せたときの処理　大きさを2倍に変形
            scale: 2
        }).stop();
    },
    function() {
        $(this).transition({
            // マウスを外したときの処理 大きさを1倍に変形
            scale: 1
        }).stop();
    }
);
//(中略)

　アニメーションがキャンセルされ、以下の動画のようになれば成功です。

step4 不具合の対応

　jQuery Transit は、WebKitで不具合が出ることがあるようです。必ずしも解消できるとは限りませんが、以下のような対処法があります。

要素のちらつき

　要素のアニメーションがちらつく場合は、アニメーションさせる要素に -webkit-backface-visibility プロパティを指定し、 値に hidden と指定してみましょう。

CSS

.box {
  -webkit-backface-visibility: hidden;
}

テキストのちらつき

　テキストのアニメーションがちらつく場合には、アニメーションさせる要素に -webkit-transitionプロパティを指定し、値に translate3d(0,0,0) と指定してみましょう。

CSS

.box {
  -webkit-transition: translate3d(0,0,0);
}

　イベントやメソッドについてのリファレンスはこちらのサイトがオススメです。
　[Qrefy]