1. ホーム
2. パソコンホーム

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

投稿日 : 2021年12月11日 更新日 : 2022年05月14日

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

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

opacityを使う

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

  .opacity{
    height: 0;
    opacity: 0;
    transition: all .5s ease;
  }
  .opacity.active{
    height: 100%;
    opacity: 1;
  }

display: none → block を使う場合

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

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

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

 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);
  }
}

【javascript】親要素、子要素、兄弟要素を取得する