jQuery Transit
「jQuery Transit」は、CSS3によるアニメーションや要素の変化・変形を、jQueryで利用できるプラグインです。記述方法が複雑で使いづらいCSS3アニメーション（transform／transition）を、簡単な記述方法で実装できます。
Google Chrome、Firefox、Safari、Opera、Internet Explorer 10に対応しており、IE9以前のブラウザーにはフォールバックが用意されています。
Mobile Safariにも対応していますので、iOSをターゲットとしたスマートフォンサイトにも利用できますが、Androidについては公式に対応が明記されていません。Androidの「ブラウザー」はCSS3アニメーションのバグが非常に多いので、利用する場合は入念な検証が必要です。
ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。
step1 jQueryプラグインの読み込み
jQuery TransitはjQuery1.4以降でのみ動作します。jQuery1.4以降をjQueryの公式サイトから、jQuery Transitを配布ページからダウンロードします。ページ中央のDOWNLOADボタンの上で右クリックし、リンク先を保存します。
配布ページ。ダウンロードは中央のDOWNLOADボタンから
jQuery TransitはGitHub でも公開されており、ページ右下の「Download ZIP」ボタンからダウンロードできます。プラグイン配布ページでダウンロードするとminify（圧縮）されているので、プラグインの中身を見たい場合はGitHubでダウンロードしましょう。
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);
}
このプラグインの利点は、イベントの発生タイミングを明確に指定でき、複雑なCSSアニメーションを手軽に実装できる点です。
上記で紹介した豊富な機能を組み合わせて、いろいろなパターンのアニメーションを実行してみましょう！
イベントやメソッドについてのリファレンスはこちらのサイトがオススメです。
[Qrefy]
