以前ここでも「CSS3 Transitionプロパティでアニメーションを実行させるパターン【ページロード/マウスオーバー/クリックアクション】」と題して、
CSSアニメーションの実行パターンをいくつか紹介しましたが、
アニメーションの実行制御をCSS側でなくjQueryで操作させる方法が
簡単でいろいろとこの先使えそうだったので紹介してみます。
jQueryでCSSアニメーションを実行させる方法
構成としてはCSS側でアニメーション設定をしておいて
jQuery側でコンテンツ要素に対してclassを付けたり外したりさせることで
その要素に対してアニメーション制御をする形になります。
例えばHTMLには
以下のようなidを付けたdivを用意して、
◆HTML <div id="action"></div>
CSS側では
以下のようにアニメーションをセットします。
◆CSS #action{ top: 0; left: 0; width: 50px; height: 50px; background-color:#fff; border:#000 3px solid; position: absolute; -webkit-transition-property:left,width,height,background-color; -webkit-transition-duration:1s,1s,1s,1s; -webkit-transition-timing-function:linear,linear,linear,linear; -moz-transition-property:left,width,height,background-color; -moz-transition-duration:1s,1s,1s,1s; -moz-transition-timing-function:linear,linear,linear,linear; -o-transition-property:left,width,height,background-color; -o-transition-duration:1s,1s,1s,1s; -o-transition-timing-function:linear,linear,linear,linear; transition-property:left,width,height,background-color; transition-duration:1s,1s,1s,1s; transition-timing-function:linear,linear,linear,linear; } #action.motion{ left: 400px; width: 100px; height: 100px; background-color:#555; }
クラス「.motion」に設定してある値がアニメーション実行後の動作になり、
このクラスをjQueryにて要素をクリックするごとに付けたり外したりすることで
アニメーションの実行制御をします。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script> $(function(){ $('#action').click(function(){ $(this).toggleClass('motion'); }); }); </script>
そしてこれらを実行させると以下のような感じに。
※画面上の□をクリックしてください。
「jQueryでCSSアニメーションを実行させる方法」サンプルを別枠で表示
四角をクリックするごとに
「left」「width」「height」「background-color」の値を
CSSアニメーション変化させています。
サンプルではjQueryでのクリック動作でアニメーション制御していますが
マウスオーバーなどの別のアクションでも実行させることも可能です。
CSSよりもjQueryの方が様々なイベント処理が行えるので
jQueryでの制御によってCSSアニメーションをあれこれ操作するのも使いやすいかと思います。
jQueryでCSSアニメーションを実行させる際に是非。。。