CSS3でフェードインとフェードアウト

CSS3のtransition-durationを使うと、jQueryなどを使わずに簡単に要素のフェードインやフェードアウトを行うことができる。

例

transition-durationに2sを設定しているので、2秒かけて要素の状態が徐々に変化していく。
removeでは、要素を徐々に透明にしつつ高さを0にする。
showでは、徐々に要素の高さと透明の設定も元にもどしている。

div.remove {
  opacity: 0;
  height: 0;
  transition-duration: 2s;
}

div.show {
  opacity: 1;
  height: 200px;
  transition-duration: 2s;
}

フェードイン、フェードアウト対象の要素の定義とJavaScriptの内容。
JavaScriptでは、ボタンのクリックイベントで対象要素のクラスを切り替えてフェードイン、フェードアウトを実行している。

<div id="target">
  要素
</div>

<button type="button" id="remove">削除</button>
<button type="button" id="add">表示</button>

<script>
  var removeBtn = document.getElementById('remove');
  var addBtn = document.getElementById('add');
  var div = document.getElementById('target');

  removeBtn.addEventListener("click", function() {
    div.className = 'remove';
  });
  addBtn.addEventListener("click", function() {
    div.style.display = '';
    div.className = 'show';
  });
</script>

実行例

要素