「display:none」の要素は、transitionプロパティを使用してもフェードインすることはできません。
opacityの場合は、フェードインすることも容易ですが、タブ切り替えの時など、「display:none」を使用したいこともあると思います。
「display:none」の要素をフェードインする方法を解説致します。
試しに「display:none」でやってみる
試しに、「opacity:0、display:none」を設定して試してみます。
オレンジ色のボタンを押したら、「activeクラス」を付与して、「opacity: 1、display: block」を適用するという流れです。
ボタンを押して、表示を確認してみてください。
<button id="btn" class="btn btn--orange">PUSH</button>
<button id="reset" class="btn">リセット</button>
<div class="content">
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
</div>.content {
display: none;
opacity: 0;
transition: all 0.3s;
}
.content.active {
display: block;
opacity: 1;
}document.getElementById('btn').addEventListener('click',() => {
document.querySelector('.content').classList.add('active');
})
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
実際に動きを確認してみると、フェードインで現れず、すぐさま表示されていると思います。
アニメーションを設定する
これを解決するにはanimationプロパティを使用して、フェードインするアニメーションを設定しましょう。
ボタンをクリックすると、アニメーションプロパティを設定したクラスを付与します。
.content {
display: none;
opacity: 0;
}
.content.active {
display: block;
/* animationプロパティ設定 */
animation-name: fadeIn;
animation-fill-mode:forwards;
animation-duration:1s;
}
/*フェードインアニメ*/
@keyframes fadeIn{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
フェードインで現れるのが確認できたと思います。
アニメーションプロパティなら、フェードインの時間や、イージングなども自由に設定できます。
アニメーションプロパティの詳しい使い方は別記事にまとめているの、こちらをご覧ください。
初学者のスタートダッシュに最適