CSS3のアニメーションをjavascriptで実行する方法

css

よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通にcssで「:hover」の部分に変化させたいプロパティを記述すればいいだけなんですが、javascriptで制御する場合はどうするんだっけ？と思ったので試した。

動作としては、ボタンをクリックしたらdivのボックスの背景色とサイズを拡大・縮小させるアニメーションを作ってみます。

CSS3のtransitionの設定をする

まずは、アニメーションさせる為のdiv要素・・ここでは「box」というID名をつけて、初期設定をします

div#box{
    width:100px;
    height:100px;
    background-color:#ccc;
    -webkit-transition-property:background-color,width,height;
    -webkit-transition-duration:0.4s,0.4s,0.4s;
    -webkit-transition-timing-function:linear,linear,linear;
}

上記の設定は、「背景色」初期値はグレー、「幅」初期値は100px、「高さ」初期値は100pxで設定し、それぞれのプロパティ0.4秒で変化させる記述です。

変化後の状態のcssを書く

簡単に説明すると下記の「div#box.ck」は、クリック後の変化させたプロパティである。

div#box.ck{
    background-color:#ff0000;
    width:200px;
    height:200px;
}

javascriptでクラスを追加する

上記でクリックした後のクラスのcssを書いた後は、javascriptのクリックイベントで「className」プロパティに「ck」クラスを設定するにする。
すると、内部的には「div id=”box” class=”ck”」となり、アニメーションする。フラグでfalseの場合は「className」プロパティをなくすことでクラス「ck」が設定から外れるので、元の状態へアニメーションする。

var flag=false;
document.getElementById("btn").addEventListener("click",function(){
  flag=!flag;
    if(flag){
	document.getElementById("box").className="ck"; 
    }else{
         document.getElementById("box").className="";
    }
});

jQuery版だと、「toggleClass」で追加と削除が行えるので楽ちんです。＊横幅だけ広がるだけのアニメーションです。

//jqueryバージョン
$("#btn2").click(function(){
	$("div#box2").toggleClass("ck2");
});