JavaScriptを用いてハンバーガーメニューを作る際に、タブレット版とスマホ版でアニメーションを変えたい

題名にもある通りハンバーガーメニューを作ろうと思っており、現在JavaScriptを用いて処理を記述しています。
しかし、自分の考えるものと異なる挙動をしており、考えても何が原因なのかわからない状態でいます。

自分が実現したいことは、
・タブレット版ではハンバーガーメニューが上からスライドイン
・スマホ版ではハンバーガーメニューが右からスライドイン
をアニメーション付きで実現したいのですが、
実際のところは
・タブレット版では正常に機能するが、スマホ版では右からのスライドインは行われず、何も動作しないが、タブレット版からリサイズした際にすでに動作したメニューの出現がスマホ版のサイズで出てくる
という風になっています。

これは何が原因なのでしょうか。
また、上記を実現するためにJavaScriptにてレスポンシブに対応した処理を条件分岐で記述する方法があると思いますが、この記述で正しいのかご意見いただけると幸いです。

html
1<div class="hamburger-menu" id="hamburger_menu">
2      <div class="logo">
3        <span class="logo--left"> 暮らしの体験宿</span>
4        <span class="logo--right">いろは</span><br>
5        <span class="logo--lower">-Yakushima Lodge & food Atelier-</span>
6      </div>
7      <div class="nav__hamburger-btn" id="hamburger_crossbtn">
8        <div class="hamburger-btn__cross">×</div>
9      </div>
10      <ul class="nav__ul nav__ul--hamburger">
11        <a href="#" class="nav__ul--ankwer">
12          <li class="nav__li nav__li--1">
13            -いろはのこと-
14          </li>
15        </a>
16        <a href="#" class="nav__ul--ankwer">
17          <li class="nav__li nav__li--2">
18            -宿泊ロッジ-
19          </li>
20        </a>
21        <a href="#" class="nav__ul--ankwer">
22          <li class="nav__li nav__li--3">
23            -食工房/ラウンジ-
24          </li>
25        </a>
26        <a href="#" class="nav__ul--ankwer">
27          <li class="nav__li nav__li--4">
28            -体験プログラム-
29          </li>
30        </a>
31        <a href="#" class="nav__ul--ankwer">
32          <li class="nav__li nav__li--5">
33            -ご予約-
34          </li>
35        </a>
36      </ul>
37      <a href="#">
38        <img src="画像/facebook.png" alt="" class="hamburger-menu__facebook">
39      </a>
40      <a href="#">
41        <img src="画像/instagram.png" alt="" class="hamburger-menu__instagram">
42      </a>
43    </div>
44    <div class="background-image">
45      <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo">
46    </div>
47    <div class="background-image--mobile">
48      <a href="#">
49        <img src="画像/logo-white.png" alt="ロゴ" class="background-image__white-logo">
50      </a>
51    </div>

css
1これはモバイル版CSSです
2.hamburger-menu{
3  width: 320px;
4  position: absolute;
5  right: -360px;
6}
7.hamburger-menu--mobile-apearance{
8  right: 0px;
9  transition: 1s;
10}
11これはタブレット版のCSSです
12.hamburger-menu{
13  background-color: rgba(0, 0, 0, 0.644);
14  height: 100vh;
15  width: 100vw;
16  padding: 1px;
17  margin: 0px;
18  box-sizing: border-box;
19  display: block;
20  overflow: hidden;
21  position: absolute;
22  z-index: 100;
23  top: -100vh;
24}
25.hamburger-menu--apearance{
26  top: 0vh;
27  transition: 1s;
28}

JavaScript
1// 宣言
2const btn =document.getElementById('hamburger_btn');
3const crossbtn =document.getElementById('hamburger_crossbtn');
4// 処理
5btn.addEventListener('click' , () => {
6  if (window.matchMedia('(min-width: 700px)').matches) {
7      document.getElementById('hamburger_menu').classList.toggle('hamburger-menu--apearance');
8  } else {
9    document.getElementById('hamburger_menu').classList.toggle('hamburger-menu--mobile-apearance');
10  };
11});