HTML&CSS

「display:none」の要素をフェードインする方法

display:noneの要素をフェードインさせる方法

「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;
    }
}
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

フェードインで現れるのが確認できたと思います。
アニメーションプロパティなら、フェードインの時間や、イージングなども自由に設定できます。
アニメーションプロパティの詳しい使い方は別記事にまとめているの、こちらをご覧ください。

-HTML&CSS
-, ,