▲TOPへ戻る

【css】display: none から block に切り替わった時にフワッとアニメーションさせる

display none black animation

もともとはdisplay: none; を設定し、javascriptでクラスactiveを追加して、display: block に切り替えると・・・

  .transition{
    display: none;
    transition: all .3s ease;
  }
  .transition.active{
    display: block;
  }

Titleをクリックしてみてください。

Title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit, impedit eius! Corrupti hic eius numquam dicta optio commodi laboriosam sequi harum expedita odio officiis quos ea incidunt, veritatis eligendi molestias.

transitionが効かず、一瞬で現れて、あまりおしゃれじゃありません。

opacityを使う

display: none → blockではなく、 opacity: 0; → opacity: 1;に指定すれば、 transitionでアニメーションさせることができます。

Titleをクリックしてみてください。要素がフワッと現れます。

Title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit, impedit eius! Corrupti hic eius numquam dicta optio commodi laboriosam sequi harum expedita odio officiis quos ea incidunt, veritatis eligendi molestias.
  .opacity{
    height: 0;
    opacity: 0;
    transition: all .5s ease;
  }
  .opacity.active{
    height: 100%;
    opacity: 1;
  }

display: none → block を使う場合

どうしてもdisplay: none → blockを使いたい場合は、animationを使う方法があります。

クラスactiveが追加されたら、animationが発火するようにします。

  .display-none{
    display: none;
  }
  .display-none.active{
    display: block;
    animation: appear .5s ease;
  }
  @keyframes appear {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }

Titleをクリックしてみてください。

Title

でも、これだとactiveを外した時、 パッと消えてしまうのが気になる。

display: block → none の時も、フワッと消したい!

これを実装するには、javascript を使うしかなさそうです。
ちょっと力業になりますが、もっといい書き方あったら教えてください。

CSSの方にtransitionの設定をしておいてください。

 function active(obj) {
  //  クラスactiveがなかったら、activeを追加
  if (!obj.nextElementSibling.classList.contains("active")) {
    obj.nextElementSibling.classList.add("active");
  } else {  //  フワッと消す時の処理
    obj.nextElementSibling.style = "opacity:0"; //  まずopacityで見えなくする
    setTimeout((e) => { //  0.5秒後にクラスactiveを削除
      obj.nextElementSibling.classList.remove("active");
      obj.nextElementSibling.style = "opacity:1";
    }, 500);
  }
}

これで、フワッと現れ、フワッと消えてくれます。

Title

nextElementSiblingに関しては以下を参考にしてください。

js
【javascript】親要素、子要素、兄弟要素を取得する
  1. display: none → block の時、transition は効かない。
  2. transitionを使いたい時は、opacityを使う。
  3. display: none → blockを使いたい時は、animationを使う。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ