最近transitionが楽しくなってきたからその記述について
transitionとは
http://www.htmq.com/css3/transition.shtml
CSSによってアニメーションさせる時に使用するプロパティ。前提として、jsを使用するのが基本。
例えば、
<div class="test left"></div>
.test { position: absolute; height: 50px; width: 50px; background-color: #000; } .left { left: 0%; } .right { left: 100%; }
$(function() { setTimeout(function(){ $(".test").removeClass("left"); $(".test").addClass("right"); },1000); });
これを実行すると、画面一番左に存在している黒い四角が、1000ミリ秒後に一番右にパッと移動する。
でも、パッと移動させるんじゃなくてすーっと画面を横切るようにしたいとする。
そうした時にtransitionの出番。
<div class="test left"></div>
.test { position: absolute; height: 50px; width: 50px; background-color: #000; transition-property: left; transition-duration: 10s; } .left { left: 0%; } .right { left: 100%; }
$(function() { setTimeout(function(){ $(".test").removeClass("left"); $(".test").addClass("right"); },1000); });
いじったのはCSSだけ。これで「黒い四角が1000ミリ秒後に移動開始、10秒かけて右に移動する」という動きになる。
ざっくりいうと、
transition-propertyはtransitionしたいプロパティを指定。
transition-durationは何秒かけるか。
で、ここからが本番。
CSSにはtransformプロパティというものが存在する。
まあ、ざっくりいうと変形に関するプロパティで、横を伸ばしたり縦を伸ばしたりズームしたり回転したりするプロパティ。
これと組み合わせれば何秒かけて要素がズームするとか、回転するとか、そうした面白い動きが実装できる。
さらにもう1つ。javascriptでtransitionEndを検出することで、transitionが終了した時に関数を実行できたりする。
以下、サンプルコード
<div class="test"></div>
.test { position: absolute; height: 50px; width: 50px; background-color: #000; -moz-transition: -moz-transform 2s linear; -webkit-transition: -webkit-transform 2s linear; -o-transition: -o-transform 2s linear; -ms-transition: -ms-transform 2s linear; transition: transform 2s linear; webkitTransform:scale(1.0); mozTransform:scale(1.0); oTransform":scale(1.0); transform":scale(1.0); } .zoom { webkitTransform:scale(1.5); mozTransform:scale(1.5); oTransform":scale(1.5); transform":scale(1.5); }
$(function() { setTimeout(function(){ $(".test").addClass("zoom"); },1000); var flag = 0; $(".test").bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){ if(flag == 0) { flag = 1; alert("hoge"); }; }); });
ざっくりこんな感じ。
まず、1000ミリ秒後に.testにzoomを追加。するとscaleのアニメーションが始まる。scaleは拡大縮小に関するプロパティ。
2秒かけて1.5倍に拡大した後、transitionendが発火。hogeというalertが鳴る。簡単だね。
注意事項としては、サンプルでいうflag及びそれによるif文。これがないと、ブラウザによっては2回3回とalertが鳴ってしまう。
例えばここでいうalertの部分をさらにtransition操作するものにしたりとか、ページジャンプするものにしたりとか、スクロールさせるものにすると面白いコンテンツが作れそう。
ただ、transitionはIE9以下は対応していないので、if文で分岐させて何か処理をさせる必要がある。
では