質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

907閲覧

ハンバーガーメニューの挙動について(transitionが、もとに戻る時には適応されない)

Okt

総合スコア21

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/06/01 15:13

編集2023/06/02 23:51

実現したいこと

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を付与してみましたが、消える時はすぐに消えてしまいます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Okt

2023/06/01 15:17

以前から何回か利用させていただいておりますが、質問文中のHTMLだけがなぜか改行できません。本質問と関係ないのですが、解決の仕方をご存知の方がいらっしゃいましたら教えていただきたいです。 読みにくくて申し訳ありません。
NESCAFE

2023/06/01 16:22 編集

ソースコードはこんな感じでバッククオート3つで囲んであげると見やすくなりますよ。 (例) ```html <!DOCTYPE html> <html lang="en"> <!-- 略 --> </html> ``` ちなみに改行がなければ1つでも使えます。 (例) `.nav.open`の方にも`transition`を付与してみました バッククオートとは https://wa3.i-3-i.info/word11728.html
Okt

2023/06/02 14:50

ありがとうございます。 入力の際のテンプレートにもあったものを、勝手にこっちで消していました、、、 教えていただきありがとうございました。
guest

回答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}

CodePenen CSS Transition hamburgerMenu Sample

投稿2023/06/01 16:18

編集2023/06/01 16:35
hatena19

総合スコア33685

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Okt

2023/06/02 14:51

ありがとうございました。 見えていないだけでちゃんと動いていたんですね。 本当にありがとうございました。
guest

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行目に上記2点加筆させて頂きました。
https://jsfiddle.net/wkog6ted/

投稿2023/06/01 16:06

編集2023/06/01 16:10
NESCAFE

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2023/06/01 16:33

細かいことですが、 .wrapper .nav には transition: all 0.5s; とallで設定されてますので、 transition: transform 0.5s ease-out, opacity 0.5s ease-out; は不必要では。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問