CSSでフェードのアニメーションを実装する

CSSでフェードのアニメーションを実装する方法をメモ。

サンプルコード

ボタンクリックで要素にclassを追加・削除するようにして、そのclassに応じて表示と非表示をフェードで切り替えるようにしてみます。

HTML

<button id="target">クリックで表示</button>
<div id="sample">フェードで表示する要素<a href="#">リンク要素テスト</a></div>

ボタンクリックでclassの追加・削除を行うJavaScriptです。

JavaScript

var target = document.getElementById('target');
var sample = document.getElementById('sample');
var flag = false;
target.addEventListener('click', function() {
	if(flag) {
		sample.classList.remove('is-show');
		flag = false;
	} else {
		sample.classList.add('is-show');
		flag = true;
	}
}, false);

フェードさせる要素にtransitionを設定して、classの追加・削除に応じてdisplayの値を切り替えるようにしてみます。

CSS

#sample {
	width: 100px;
	height: 100px;
	background: #E74C3C;
	display: none;
	transition: 800ms;
}
#sample.is-show {
	display: block;
}

この場合、表示・非表示は切り替わりますが、フェードのアニメーションにはなりません。
displayの場合のデモページ

フェードのアニメーションにしたい場合はdisplayではなくopacityを使用します。

CSS

#sample {
	width: 100px;
	height: 100px;
	background: #E74C3C;
	opacity: 0;
	transition: 800ms;
}
#sample.is-show {
	opacity: 1;
}

これでフェードで切り替わるようになりました。
opacityの場合のデモページ
ただし、opacityは要素を透明にしているだけなので、要素内にリンクがある場合は非表示中でもクリックできるなどの問題があります。

次に、先ほどのopacityにdisplayを合わせて設定してみます。

CSS

#sample {
	width: 100px;
	height: 100px;
	background: #E74C3C;
	opacity: 0;
	display: none;
	transition: 800ms;
}
#sample.is-show {
	opacity: 1;
	display: block;
}

これで非表示中にクリックができる問題は解消しましたが、displayを合わせて設定するとフェードのアニメーションになりません。
opacityとdisplayの場合のデモページ

opacityとvisibilityを組み合わせることで解消できます。

CSS

#sample {
	width: 100px;
	height: 100px;
	background: #E74C3C;
	opacity: 0;
	visibility: hidden;
	transition: 800ms;
}
#sample.is-show {
	opacity: 1;
	visibility: visible;
}

これで非表示中にクリックができなくなり、かつフェードのアニメーションも実装できました。
opacityとvisibilityの場合のデモページ
ただし、非表示の状態でも要素分の領域は確保されるので、positionを使って配置するなど適宜対応が必要です。