memocarilog

jQuery を使わずに、CSS3・requestAnimationFrame メソッド・setTimeout 関数で fadeIn / fadeOut のアニメーション表現を行うということをやってみました。jQuery を使えば fadeIn()、fadeOut() だけの記述で済むことですが、いざそれを使わずにとなると大変だなという印象です…。

各サンプルは、マウスオーバー時にフェードアウト・マウスアウト時にフェードインします。 HTML は共通で以下のようになっています。

<div id="box">FadeIn/Out</div>

CSS3 でフェードイン・アウトする

opacity の変化を transition プロパティでアニメーションにします。transition を設定するだけでアニメーションにしてくれるのでとても簡単です。transition は IE10以上で対応しています。

See the Pen CSS3でフェイドイン/アウト by Saomocari (@Saomocari) on CodePen.

CSSコード

#box{
  width: 150px;
  height: 100px;
  〜略〜
  opacity:1;
  transition:all 0.3s;
}
#box:hover{
  opacity:0.5;
  transition:all 0.3s;
}

JavaScript の requestAnimationFrame メソッドを使ってフェードイン・アウトする

JavaScript の requestAnimationFrame メソッドを使い、マウスオーバー時 opacity を 0.5 の値に、マウスアウト時に opacity を 1 の値に戻すということをアニメーションにしています。この requestAnimationFrame メソッドもまた、IE10以上でないと使えません…。

See the Pen requestAnimationFrame メソッドでフェードイン・アウト by Saomocari (@Saomocari) on CodePen.

JavaScript コード

window.onload = function(){

var box = document.getElementById('box');
// ↑フェードさせたい要素のIDを(' ')内に指定
var boxOpa;
box.style.opacity = 1;

// フェードアウト時のアニメーション設定
function fadeOut(){
  var boxOpa = parseFloat(box.style.opacity);
  var opaValue = .05;
  var limit = 0.5;
  // ↑ opacity値の限度
  //（この設定だと opacity:0.5 まで透明に）

   if(boxOpa > limit){
     boxOpa = boxOpa - opaValue;
     box.style.opacity = boxOpa;
     requestAnimationFrame(fadeOut);
     // ↑ requestAnimationFrame で opacity値 が 0.5 になるまで
     // 透明度を0.05ずつ減らして行く
   }
}

// フェードイン時のアニメーション設定
function fadeIn(){
  var boxOpa = parseFloat(box.style.opacity);
  var opaValue = .05;

   if(boxOpa < 1){
     boxOpa = boxOpa + opaValue;
     box.style.opacity = boxOpa;
     requestAnimationFrame(fadeIn);
     // ↑ requestAnimationFrame で opacity値 が 1 になるまで
     // 透明度を0.05ずつ足して行く
   }
}  

// マウスオーバー時に fadeOut アニメーションを実行
box.onmouseover = function(){
  fadeOut();
}
// マウスアウト時に fadeIn アニメーションを実行
box.onmouseout = function(){
  fadeIn();
}

}

JavaScript の setTimeout を使ってフェードイン・アウトする

JavaScript の setTimeout 関数を使い、マウスオーバー時に opacity を 0.5 の値へ、マウスアウト時に 1 の値へ、1/100 秒ごとに 0.05 ずつ opacity 値を足したり引いたりすることで、アニメーションにしています。動作確認は IE7 までOKでした。

See the Pen JavaScript の setTimeout を使ってフェードイン・アウトフェードイン・アウト by Saomocari (@Saomocari) on CodePen.

JavaScript コード

window.onload = function(){  

var box = document.getElementById('box') ;
// ↑フェードさせたい要素のIDを(' ')内に指定
var limit = 0.5;
//  ↑ opacity値の限度

// フェイドアウトアニメーション設定
var fadeOut_timer;
function fadeOutTimer(opaValue){
    if (opaValue > limit && opaValue > 0.05){
        box.style.filter = "alpha(opacity:"+(opaValue*100)+")";
        box.style.opacity = opaValue;
        opaValue = opaValue - 0.05;
        fadeOut_timer = setTimeout(function(){ fadeOutTimer(opaValue); }, 10);
        // ↑ setTimeout で opacity値 が 0.5 になるまで
     	// 透明度を0.05ずつ減らして行くことを 1/100 秒毎に繰り返す
     	// タイマーを設定する
    } else {
        clearTimeout(fadeIn_timer);
        // ↑ opacity値 が 0.5 になったらタイマーを止める
        box.style.filter = "alpha(opacity:"+(limit*100)+")";
        box.style.opacity = limit;
        // limit 値の透明度を設定
    }
}

// フェイドインアニメーション設定
var fadeIn_timer;
function fadeInTimer(opaValue){
    if (opaValue < 1){
        box.style.filter = "alpha(opacity:"+(opaValue*100)+")";
        box.style.opacity = opaValue;
        opaValue = opaValue + 0.05;
        fadeIn_timer = setTimeout(function(){fadeInTimer(opaValue);}, 10);
     	// ↑ setTimeout で opacity値 が 1 になるまで
     	// 透明度を0.05ずつ足して行くことを 1/100 秒毎に繰り返す
     	// タイマーを設定する
    } else {
        clearTimeout(fadeIn_timer);
        // ↑ opacity値 が 1 になったらタイマーを止める
        box.style.filter = "alpha(opacity:100)";
        box.style.opacity = 1;
    }
}

// マウスオーバー時に fadeOut アニメーションを実行
box.onmouseover = function(){
    clearTimeout(fadeIn_timer);
	 // ↑ 連続してマウスアウトした時のために
	 // fadeOutアニメーションを止める処理
  	 // （jQuery の stop() のようなもの）
    var opaValue = 1;
    fadeOutTimer(opaValue);
}
// マウスアウト時に fadeIn アニメーションを実行
box.onmouseout = function(){
    clearTimeout(fadeOut_timer);
    var opaValue = limit;
    fadeInTimer(opaValue);
}

}

以上、3パターンのコードでした。

jQuery を使わずにクロスブラウザでアニメーションしたい場合は、最後の setTimeout 関数を使う方法になりますが、とてもコードが長くなってしまいました。

JavaScript の勉強のため色々コードを書いてみてるので、こういうエントリーになりましたが、そこまでパフォーマンスを気にしなくてもよい場合は、やはり jQuery などのライブラリーを使うのが効率的ですね…。

CSS3 のアニメーションは直感的に使えて楽しいので、もっと普通に使える場面が増えるといいなと思います。