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