【JavaScript】jQueryの.fadeIn()をCSSで実装する

問題

アニメーションはCSSにお任せしたい。

.fadeIn()とかをCSSでできませんか。

答え

アニメーションはCSSにお任せすると、JavaScript側ではCSSを変更したり、classの追加、削除で済むようになる。

<style>
.overlay {
	background:#000;
	opacity:0;
	transition:1s;
}
.overlay.in {
	opacity:0.25;
}
</style>

<div class="overlay" style="width:200px; height:200px;">
このボックスのopacityが変わります
</div>

<button id="example1" onclick="$('.overlay').addClass('in');">.fadeIn()をCSSで</button>
<button id="example1" onclick="$('.overlay').removeClass('in');">.fadeOut()をCSSで</button>

解説

.opacityの要素に.inを付与すると、opacity:0からopacity:0.25に向かって、1秒かけて、アニメーションします。

.opacity.inの要素から.inを除去すると、opacity:0.25からopacity:0に向かって、1秒かけて、アニメーションします。

デモ

↓ このボックスのopacityが変わります

↑ このボックスのopacityが変わります

.fadeIn()をCSSで .fadeOut()をCSSで

メモ

最初の状態と最後の状態を定義して、その間をアニメーションさせる感じ。

アニメーションする時間は、最後の状態の側に書いたtransition値になるので、行きと帰りで時間を変えることもできる。

transition-property で特定のCSSプロパティだけトランジションさせることができる。

transition-delay で遅延させたりタイミングを変えることができる。

transition-timing-function で変化の仕方をカスタマイズできる。

たいていの場合は transition:0.4s; などの記述のみで事足りる。