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

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です