アニメーションのtransition-durationが効かない

ハンバーガーメニューが表示されたとき
######メニュー以外の部分はオーバーレイを設定しています。

メニューが表示されているときのオーバーレイのCSSは　open　というクラスで設定していて
jQueryでそれをaddClassしたりremoveClassしたりすることでオーバーレイを表示させたり非表示にさせたりしています。

CSSで
transition: opacity .5s;
を設定しているのですが、
メニューが非表示になる際
####一瞬でオーバーレイのopacityが0になってしまいます。

メニューを表示するときは時間をかけてオーバーレイが濃くなるので、ふわっと表示されます。

#どうすればオーバーレイのopenクラスをremoveする際にも適応させられるでしょうか。

足りない情報があれば追記いたしますので、教えてください。
よろしくお願い致します。

該当のソースコード

HTML
1<body>
2<header>
3    <div class="header">
4      <h1>Ryou</h1>
5      <ul>
6        <li><i id="menu-icon" class="fas fa-bars fa-fw"></i></li>
7      </ul>
8    </div>
9  </header>
10  <nav id="slide-menu">
11    <ul>
12      <li><a href="#profile-btn">Profile</a></li>
13      <li><a href="#skill-btn">Skill</a></li>
14      <li><a href="#works-btn">Works</a></li>
15      <li><a href="#service-btn">Service</a></li>
16      <li><a href="#contact-btn" class="contact-btn">お問い合わせ</a></li>
17      <ol>
18        <li><i class="fab fa-twitter fa-fw"></i></li>
19        <li><i class="fab fa-pinterest-p fa-fw"></i></li>
20      </ol>
21    </ul>
22  </nav>
23
24⁝
25 <div class="overlay"></div>
26</body>

CSS
1.overlay {
2  content: "";
3  display: block;
4  width: 0;
5  height: 0;
6  background-color: rgba(0, 0, 0, 0.5);
7  position: absolute;
8  top: 0;
9  left: 0;
10  z-index: 2;
11  opacity: 0;
12  transition: opacity .5s;
13}
14.overlay.open {
15  width: 100%;
16  height: 100%;
17  opacity: 1;
18}

JavaScript
1window.addEventListener('DOMContentLoaded', function(){
2
3  $('#menu-icon').click(function(){
4        $('#slide-menu').toggleClass('active');
5        if($('#slide-menu').hasClass('active')) {
6          $('.overlay').addClass('open');
7        }else {
8          $('.overlay').removeClass('open');
9        }
10      });
11
12  $('.overlay').click(function(){
13    if($('#slide-menu').hasClass('active')) {
14      $('.overlay').removeClass('open');
15      $('#slide-menu').removeClass('active');
16  }
17
18  });
19});
20

試したこと

オーバーレイのopenクラスにも
transition: opacity .5s;
を付与しましたが、できませんでした。

また、jQueryでも
$('.open').css('transition-duration', '5s')
を記載しましたが、できませんでした。
（本当はtransitionで変更するプロパティと時間を一度に設定したかったのですが、書き方がわからずできませんでした。）

補足情報（FW/ツールのバージョンなど）

HTML5・CSS3

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

回答1件

ベストアンサー

下記のCSSでどうですか。

css
1.overlay {
2  content: "";
3  display: block;
4  width: 0;
5  height: 0;
6  background-color: rgba(0, 0, 0, 0.5);
7  position: absolute;
8  top: 0;
9  left: 0;
10  z-index: 2;
11  opacity: 0;
12  transition: opacity .5s, width 0s .5s, height 0s .5s; /* 修正 */
13}
14.overlay.open {
15  width: 100%;
16  height: 100%;
17  opacity: 1;
18  transition: opacity .5s; /* 追加 */
19}

.overlay の width と height が 0 になっているので openクラスが外れた瞬間にサイズ0になり見えなくなります。サイズ0になるのを transition-delay で遅らせます。

CSS トランジションの使用 - CSS: カスケーディングスタイルシート | MDN

CSS transitionを往復で非対称にかける場合の注意点 - Qiita

別案
.overlay のサイズは 100% 固定にして、z-index を切り替える。

css
1.overlay {
2  content: "";
3  display: block;
4  width: 100%;   /* 修正 */
5  height: 100%;  /* 修正 */
6  background-color: rgba(0, 0, 0, 0.5);
7  position: absolute;
8  top: 0;
9  left: 0;
10  z-index: -1;  /* 修正 */
11  opacity: 0;
12  transition: opacity .5s;
13}
14.overlay.open {
15  opacity: 1;
16  z-index: 2;
17}

投稿2020/08/02 04:15

編集2020/08/02 08:41

hatena19

総合スコア34075

.ryou

2020/08/03 00:58

丁寧なご回答ありがとうございます。オーバーレイのサイズが０になってしまうために一瞬で消えてしまっていたのですね。ふたつとも試してみて、想像していた動きを実装できて感動しました。 z-indexで管理する方がシンプルでわかりやすいな、と感じたのでそちらにしようと思います。添付していただいた記事も読んで理解を深めます。本当にありがとうございました。

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