アコーディオンメニューを閉じた際に一瞬中身が見えてしまうのを解決したい。

こちらのコードを参考に、自分のサイトに合わせて改変しアコーディオンメニューを実装しました。
概ね思い通りにはなったのですが、一つ気になるのが、開いたメニューを閉じる際に、一瞬だけ中身のliの文字が折りたたまれて？見えてしまうことです。参考にしたサイトではそのような挙動にはならないので、私がコードを改変した際にどこかでミスしてしまっているのかなと思ったのですが、どこを間違えてしまっているのかが見つけられず。。お力添えいただけると嬉しいです、よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" href="css/style.css">
7    <link rel="stylesheet" href="css/reset.css">
8    <title>メニュー</title>
9  </head>
10  <body>
11    <div class="wrapper">
12
13      <header class="header">
14
15        <div class="header-top" id="header-top">
16          <div class="header-top-back">
17            <div class="header-top-back-inner">
18
19              <div class="header-nav-name">
20                <a href="#">
21                  <h1>テストサイト</h1>
22                </a>
23              </div>
24
25              <div id="nav-toggle">
26                 <span></span>
27                 <span></span>
28                 <span></span>
29              </div>
30
31            </div>
32          </div>
33        </div>
34
35        <div class="sp-nav">
36          <div class="nav-container"><!--スマホメニュー -->
37            <div class="nav-text-block">
38              <div class="nav-text-container">
39
40                <ul class="nav-menu">
41                  <li class="nav-menu-list1">
42                    <a href="#"><span>HOME</span></a>
43                  </li>
44                  <li class="nav-menu-list2">
45                    <a href="#"><span>プロフィール</span></a>
46                  </li>
47                  <li class="nav-menu-list3">
48                    <a href="#"><span>メニュー１</span></a>
49                  </li>
50                  <li class="nav-menu-list4">
51                    <a href="#" >
52                      <span>メニュー２</span>
53                    </a>
54                  </li>
55                  <li class="nav-menu-list5">
56                    <a href="#">
57                      <span>お問い合わせ</span>
58                    </a>
59                  </li>
60                </ul>
61
62              </div>
63            </div>
64          </div>
65        </div>
66
67      </header>
68
69    </div>
70    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
71    </script>
72    <script type="text/javascript" src="js/custm.js"></script>
73  </body>
74</html>
75

css
1@charset "UTF-8";
2
3/*ここからヘッダー*/
4.header {
5  height: 93px;
6  transition: all 1s cubic-bezier(0.37, 0.16, 0.12, 1) 4s;
7}
8
9.header-top {
10  width: 100%;
11  position: fixed;
12  z-index: 9998;
13  transition: .5s;
14  display: flex;
15  align-items: center;
16}
17
18.header-top-back {
19  background: white;
20  width: 100%;
21  margin: 0 auto;
22  padding: 12px 4px;
23}
24
25.header-top-back-inner {
26  width: 95%;
27  display: flex;
28  margin: 0 auto;
29  align-items: center;
30  justify-content: space-between;
31  transition: .8s ease;
32}
33
34.header-nav-name {
35  margin-bottom: 4px;
36}
37
38.header-nav-name h1 {
39  color: #242424;
40  line-height: 1em;
41  font-weight: bold;
42}
43
44.header-nav-name h1 span {
45  font-size: 15px;
46  display: block;
47  line-height: 1.5em;
48  margin-left: 2px;
49  margin-bottom: 2px;
50  letter-spacing: .5px;
51}
52
53/*
54 * メニューボタン
55 */
56#nav-toggle,
57#nav-toggle span {
58  display: inline-block;
59  box-sizing: border-box;
60}
61
62#nav-toggle {
63  position: relative;
64  width: 40px;
65  height: 22px;
66  background: none;
67  border: none;
68  appearance: none;
69  cursor: pointer;
70}
71
72#nav-toggle:focus:not(:focus-visible) {
73  outline: none;
74}
75
76#nav-toggle::before,
77#nav-toggle::after {
78  content: '';
79}
80
81#nav-toggle::before,
82#nav-toggle::after,
83#nav-toggle span {
84  position: absolute;
85  width: 100%;
86  height: 4px;
87  background: #242424;
88  transition: .2s ease;
89}
90
91#nav-toggle::before {
92  top: -2px;
93  left: 5px;
94  transform-origin: 0 0;
95  transform: rotate(36deg) scaleX(0);
96  transition-delay: 0s;
97}
98
99#nav-toggle::after {
100  top: -2px;
101  right: 5px;
102  transform-origin: 100% 0;
103  transform: rotate(-36deg) scaleX(0);
104  transition-delay: .2s;
105}
106
107#nav-toggle span:nth-of-type(-n+3) {
108  right: 0;
109  transform-origin: 100% 0;
110  transition-delay: .5s;
111}
112
113#nav-toggle span:nth-of-type(1) {
114  top: 0;
115  right: -6px;
116}
117
118#nav-toggle span:nth-of-type(2) {
119  top: 9px;
120}
121
122#nav-toggle span:nth-of-type(3) {
123  bottom: 0;
124  right: 6px;
125}
126
127.active #nav-toggle::before {
128  transform: rotate(36deg) scaleX(1);
129  transition-delay: .6s;
130}
131
132.active #nav-toggle::after {
133  transform: rotate(-36deg) scaleX(1);
134  transition-delay: .8s;
135}
136
137.active #nav-toggle span:nth-of-type(-n+3) {
138  transform: scaleX(0);
139}
140
141.active #nav-toggle span:nth-of-type(1) {
142  transition-delay: .1s;
143}
144
145.active #nav-toggle span:nth-of-type(2) {
146  transition-delay: .18s;
147}
148
149.active #nav-toggle span:nth-of-type(3) {
150  transition-delay: .26s;
151}
152
153/*
154 * メニュー本体
155 */
156.sp-nav {
157  width: 100vw;
158  height: 100vh;
159  position: absolute;
160  top: 0;
161  right: 0;
162  z-index: 1000;
163  overflow: hidden;
164  display: none;
165}
166
167.nav-container {
168  width: 0;
169  height: 100vh;
170  padding: 8em 3em 3em;
171  background: #DE141E;
172  position: absolute;
173  right: 0;
174  overflow: hidden;
175}
176
177.nav-text-block {
178  width: 100%;
179  height: 100%;
180}
181
182.nav-text-container {
183  width: 100%;
184  height: 100%;
185}
186
187ul.nav-menu {
188  width: 100%;
189  height: 100%;
190  display: flex;
191  flex-direction: column;
192}
193
194ul.nav-menu li {
195  width: 100%;
196  height: 25%;
197}
198
199.nav-menu li > a {
200  width: 100%;
201  height: 100%;
202  text-decoration: none;
203  color: white;
204  display: flex;
205  justify-content: flex-start;
206  align-items: center;
207  transition: 0.2s ease;
208}
209
210.nav-menu li > a span {
211  font-size: 1.5em;
212  font-weight: 700;
213  letter-spacing: 10px;
214  text-transform: uppercase;
215  line-height: 1;
216  height: 1em;
217  display: inline-block;
218  position: relative;
219  z-index: 1002;
220}
221
222.nav-menu li > a span:before {
223  content: "";
224  display: block;
225  width: 100%;
226  height: 100%;
227  background: #fff;
228  position: absolute;
229  left: 0;
230  z-index: 1003;
231}
232
233.active {
234  overflow: hidden;
235}
236
237.active .sp-nav {
238  display: block;
239}
240
241.active .nav-container {
242  -webkit-animation: animMenuReveal 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
243  animation: animMenuReveal 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
244}
245
246.active .nav-menu li a span::before {
247  -webkit-animation: animMenuRevealLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.4s forwards;
248  animation: animMenuRevealLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.4s forwards;
249}
250
251.close-menu .sp-nav {
252  display: block;
253}
254
255.close-menu .nav-container {
256  width: 100vw;
257  right: auto;
258  left: 0;
259  -webkit-animation: animMenuClose 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.3s forwards;
260  animation: animMenuClose 0.6s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0.3s forwards;
261}
262
263.close-menu .nav-menu li a span::before {
264  left: auto;
265  right: 0;
266  background: #DE141E;
267  -webkit-animation: animMenuCloseLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
268  animation: animMenuCloseLinks 0.4s cubic-bezier(0.13, 0.13, 0.02, 1.07) 0s forwards;
269}
270
271@keyframes animMenuReveal {
272  0% {
273    width: 0vw;
274  }
275  100% {
276    width: 100vw;
277  }
278}
279
280@keyframes animMenuRevealLinks {
281  0% {
282    width: 100%;
283  }
284  100% {
285    width: 0%;
286  }
287}
288
289@keyframes animMenuClose {
290  0% {
291    width: 100vw;
292    padding: 8em 3em 3em;
293  }
294  100% {
295    width: 0vw;
296    padding: 8em 0 0;
297  }
298}
299
300@keyframes animMenuCloseLinks {
301  0% {
302    width: 0%;
303  }
304  100% {
305    width: 110%;
306  }
307}
308
309
310

reset.cssはHTML5 Doctor CSS Resetを使用しています。

js
1
2
3//ナビ
4$('#nav-toggle').on('click', function() {
5
6  var $this = $( this );
7
8  if ( $("body").hasClass('active') ) {
9    $('body').removeClass('active');
10    $('body').addClass('close-menu');
11  }
12  else {
13    $('body').addClass('active');
14    $('body').removeClass('close-menu');
15  };
16    $this.toggleClass('active');
17});
18
19

試したこと

.close-menuがついた際に、.nav-menu li a span にdisplay:none;を追加すると見えなくはなるのですが、spanにかけている:beforeより先に消えてしまうため、理想の挙動とは少し違う感じになってしまいます。

行動規範の内容に同意します

回答1件

ベストアンサー

さっさと消してしまってはいけないでしょうか？

CSS
1.close-menu li{
2display:none;
3}

jsもこんな感じで十分かと

javascript
1$(function(){
2  $('#nav-toggle').on('click', function() {
3    $('body').toggleClass('close-menu',$('body').hasClass('active')).toggleClass('active');
4  });
5});