Q&A
以前から何回か利用させていただいておりますが、質問文中のHTMLだけがなぜか改行できません。本質問と関係ないのですが、解決の仕方をご存知の方がいらっしゃいましたら教えていただきたいです。
読みにくくて申し訳ありません。
実現したいこと
HTML、CSS、JavaScriptの初学者です。
ハンバーガーメニューを作る練習をしていますが、画面の外にずらして隠している「nav」を、ハンバーガーメニューをクリックすると表示させ、再度クリックすると再び画面の外に消えていく、という挙動を練習しています。その際の、「nav」の動きを、「transition」を使用して緩やかにしたいです。
前提
以下のソースコードですが、「nav」をデフォルト状態では画面の外に切れさせ見えないようにしています。そして、ボタン（ham_btn）が押されると、addeventlistenerで「ham_btn」に新たなクラス（open）を付与し、ここで初めて「nav」が現れます。そして、もう一度ハンバーガーメニューを押すとこのクラスは削除（toggle）され元の状態に戻る、というコードを書いています。
発生している問題・エラーメッセージ
「nav」が現れる際、消える際に0.5sかけて少しゆっくり目に動いてもらいたいため、cssで「.nav」に「transition all 0.5s」を追加しています。しかし、現れる時はちゃんと遅れて出てくるのに、消す時は一瞬で消えてしまいます。
該当のソースコード
↓↓↓↓↓↓↓↓↓↓HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="wrapper"> <button class="ham_btn"> <span></span> <span></span> <span></span> </button> <div class="bg"></div> <nav class="nav"> <ul> <li>メニュー</li> <li>あああ</li> <li>いいい</li> <li>ううう</li> <li>えええ</li> <li>おおお</li> </ul> </nav> <header class="con"> ヘッダー </header> <main class="con"> メイン </main> <footer class="con"> フッター </footer> </div> <script src="main.js"></script> </body> </html>↓↓↓↓↓↓↓↓↓↓CSS
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100%;
}
.wrapper .ham_btn {
width: 80px;
height: 50px;
position: fixed;
top: 5px;
right: 5px;
border: none;
background-color: transparent;
cursor: pointer;
transition: all 0.3s;
z-index: 3;
}
.wrapper .ham_btn span {
position: absolute;
top: calc(50% - 2px);
left: 0;
display: inline-block;
width: 100%;
height: 4px;
border: none;
background-color: black;
transition: all 0.3s;
}
.wrapper .ham_btn span:nth-child(1) {
transform: translateY(-20px);
transform-origin: center center;
}
.wrapper .ham_btn span:nth-child(2) {
transform: none;
}
.wrapper .ham_btn span:nth-child(3) {
transform: translateY(20px);
transform-origin: center center;
}
.wrapper .ham_btn.btn_open span:nth-child(1) {
transform: translateY(0) rotate(45deg);
background-color: white;
}
.wrapper .ham_btn.btn_open span:nth-child(2) {
opacity: 0;
transform: translateX(-50%);
}
.wrapper .ham_btn.btn_open span:nth-child(3) {
transform: translateY(0) rotate(-45deg);
background-color: white;
}
.wrapper .bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(56, 68, 68, 0.5);
transform: translateX(-100%);
z-index: 2;
}
.wrapper .bg.bg_open {
transform: translateX(0%);
}
.wrapper .nav {
position: fixed;
top: 0;
left: 70px;
width: -moz-fit-content;
width: fit-content;
height: -moz-fit-content;
height: fit-content;
list-style-position: inside;
background-color: transparent;
transform: translateX(-100%);
opacity: 0;
transition: all 0.5s;
z-index: 2;
}
.wrapper .nav > ul > li {
color: white;
padding-top: 20px;
list-style: none;
}
.wrapper .nav.open {
transform: translateX(0%);
opacity: 1;
}
.wrapper .con {
z-index: 1;
}/*# sourceMappingURL=style.css.map */
↓↓↓↓↓↓↓↓↓↓JavaScript
const btn = document.querySelector(".ham_btn");
const nav = document.querySelector(".nav");
const bg = document.querySelector(".bg");
btn.addEventListener("click",function() {
nav.classList.toggle("open");
btn.classList.toggle("btn_open");
bg.classList.toggle("bg_open");
});
試したこと
「.nav.open」の方にもtransitionを付与してみましたが、消える時はすぐに消えてしまいます。
ソースコードはこんな感じでバッククオート３つで囲んであげると見やすくなりますよ。
（例）
```html
<!DOCTYPE html>
<html lang="en">
<!-- 略 -->
</html>
```
ちなみに改行がなければ１つでも使えます。
（例）
`.nav.open`の方にも`transition`を付与してみました
バッククオートとは
https://wa3.i-3-i.info/word11728.html
ありがとうございます。
入力の際のテンプレートにもあったものを、勝手にこっちで消していました、、、
教えていただきありがとうございました。
回答2件
0
ベストアンサー
初期状態は、画面の背景色が白、メニューの文字も白。
オープン状態になると、メニューの文字がアニメーションで右に移動、背景色は一瞬でグレー。
そこらかクローズするときは、メニューの文字がアニメーションで左に移動、背景色は一瞬で白、メニューの文字色も白なので一瞬で見えなくなる。
つまり、文字の移動はアニメーションしているが、背景色はアニメーションせずに一瞬で切り替わるので、背景色と同色の文字も一瞬で消えたように見える、ということです。
文字色を白のままでいくのなら、背景色もアニメーションするようにすれば、閉じるときの文字移動のアニメーションも見えるようになります。
css
1.wrapper .bg { 2 position: fixed; 3 top: 0; 4 left: 0; 5 width: 100%; 6 height: 100vh; 7 background-color: rgba(56, 68, 68, 0.0); /* 透明色に修正 */ 8 transition: all 0.3s; /* 追加 */ 9/* transform: translateX(-100%); 削除 */ 10 z-index: 2; 11} 12 13.wrapper .bg.bg_open { 14/* transform: translateX(0%); 削除 */ 15 background-color: rgba(56, 68, 68, 0.5); /* 追加 半透明 */ 16}
投稿2023/06/01 16:18
編集2023/06/01 16:35
総合スコア33715
0
まずtransitionプロパティを次のように修正してください。
これで消えるときもゆっくりにできます。
css
1.wrapper .nav { 2 /* transformとopacityの両方にtransitionを指定 */ 3 transition: transform 0.5s ease-out, opacity 0.5s ease-out; 4}
しかしテキストが白いとゆっくりであることを視認できませんので、例えば背景もゆっくりにしてみるとかでしょうか。
css
1.wrapper .bg { 2 /* 背景にもtransitionを指定 */ 3 transition: .5s; 4}
実行サンプルです。
CSSの98～106行目に上記２点加筆させて頂きました。
https://jsfiddle.net/wkog6ted/
投稿2023/06/01 16:06
編集2023/06/01 16:10総合スコア3
細かいことですが、
.wrapper .nav には
transition: all 0.5s;
とallで設定されてますので、
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
は不必要では。
あなたの回答
tips
プレビュー
