2021.02.07

display:none;でアニメーションがうまく動かない原因

スポンサーリンク

アニメーションがうまく動作しない!

うまく動作しない原因

CSSでアニメーションをつけたとき、うまく動作しない場合があります。

例としてあげるとすればフェード機能です。以下Gifのようにしたい↓↓



display:none;からdisplay:block;(逆も然り)に切り替わる場合、アニメーションが効かない理由として、DOMが生成されてからスタイルを読み込むからです。

いくらtransitionとかでアニメーション設定してもそもそもDOMが存在していないので効きようがないということです。

ではどうするか。
display:none;ではなくvisibilityプロパティで表示非表示を切り替えるようにしましょう!

.list {
  display: flex;
  height: 100vh;
  width: 100vw;
  position: absolute;
  font-size: 30px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  left: 0px;
  top: 0px;
  color: #fff;
  //ここがフェード部分に関わる部分
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.list.open {
  background: rgba(108, 108, 108, 0.9);
  opacity: 1;
  visibility: visible;
  transition: 0.3s;
}

 

最後にjQueryでサブクラスのつけ外しを実装して完成です。jQueryの説明は省きますが、一応コードのみ載せます。変数名とかは各々変えてもろて。

CSSでもクリック動作のアニメーションは実装できるっぽい?んですが擬似要素とかめんどいので今回は保留で。。

//ハンバーガーメニューの表示非表示
function toggleNav() {
  function toggleAction() {
    const duration = 300;
    $hamburger.toggleClass("open");
    //開くアクション
    if($hamburger.hasClass("open")) {
      $hamburgerIcon.addClass("open");
      //閉じるアクション
      } else if (!($hamburger).hasClass("open")) {
        $hamburgerIcon.removeClass("open");
      }
    }
    $hamburger.on("click", toggleAction);
  }
}