ハンバーガーメニューのtransitionが効かない。

web制作初心者です。jqueryでハンバーガーメニューを制作しています。
menuにフェードエフェクトで切り替えるためのtransitionが効きません。そもそもmenuクラスに付与するべきなのか、toggleClassの.menu_openクラスに付与するべきなのかがわかりません。
不慣れな質問ですがよろしくお願いいたします。

index.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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="mobile_menu_icon">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <h1>HELLO WORlD</h1>

  <div class="menu">
   <ul>
     <li><a href="#MENU1">MENU1</a></li>
     <li><a href="#MENU2">MENU2</a></li>
     <li><a href="#MENU3">MENU3</a></li>
     <li><a href="#MENU4">MENU4</a></li>
   </ul>
  </div>

**<!-- jquery -->**
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(".mobile_menu_icon").on('click',function() {
      $(".mobile_menu_icon").toggleClass("btn_open");
      $(".menu").toggleClass("menu_open");

    });
  </script>
  
</body>
</html>

style.scss

h1 {
  margin: 0;
}
// button
.mobile_menu_icon {
  background-color: transparent;
  border: none;
  right: 0;
  position: fixed;
  z-index: 2;
  cursor: pointer;
  margin:10px 10px;

  & > span {
    background-color: #000;
    width: 35px;
    height: 2px;
    display: block;
    margin-bottom: 9px;
    transition: transform 0.5s;

    &:last-child {
     margin-bottom: none;
    }
  }
}

.btn_open {
  &.mobile_menu_icon {
    & span {
      background-color: #fff;

      &:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
      }

      &:nth-child(2) {
        transform: translateX(-18px) scaleX(0);

      }

      &:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
      }
    }
  }
}

// menu
.menu {
  display: none;
  **transition: all 0.3s;   **
}

.menu_open {
  &.menu {
    display: block;
    background-color: #000;
    width: 100%;
    height: 100vh;
    top: 0;
    right: 0;
    position: absolute;
    z-index: 1;
    opacity: 0.8;

    & ul {
      color: white;
      list-style: none;
      position: absolute;
      top: 50%;
      right: 50%;
      padding: 0;
      margin: 0;
      transform: translate(50%,-50%);

      & li {
        padding-bottom: 4em;
        cursor: pointer;
        & a {
          color: inherit;
          text-decoration: none;
          font-size: 30px;
        }

      }
    
    }
  }

}

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

回答2件

クラスが外れた時でもtransitionが動くようにscssを修正しました。
style.scss(修正後)

h1 {
  margin: 0;
}
// button
.mobile_menu_icon {
  background-color: transparent;
  border: none;
  right: 0;
  position: fixed;
  z-index: 2;
  cursor: pointer;
  margin:10px 10px;

  & > span {
    background-color: #000;
    width: 35px;
    height: 2px;
    display: block;
    margin-bottom: 9px;
    transition: transform 0.5s;

    &:last-child {
     margin-bottom: none;
    }
  }
}

.btn_open {
  &.mobile_menu_icon {
    & span {
      background-color: #fff;

      &:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
      }

      &:nth-child(2) {
        transform: translateX(-18px) scaleX(0);

      }

      &:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
      }
    }
  }
}

.menu {
  display: block;
  background-color: #000;
  width: 100%;
  height: 100vh;
  top: 0;
  right: 0;
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;

  & ul {
    color: white;
    list-style: none;
    position: absolute;
    top: 50%;
    right: 50%;
    padding: 0;
    margin: 0;
    transform: translate(50%,-50%);

    & li {
      padding-bottom: 4em;
      cursor: pointer;
      & a {
        color: inherit;
        text-decoration: none;
        font-size: 30px;
      }
    }
  }   
}

.menu_open {
  visibility: visible;
  opacity: 0.8; 
}

投稿2022/06/20 08:11

KUBO10

総合スコア8