ハンバーガーメニューをクリックした時の動きが奇妙なのを直したい

ハンバーガーメニューを初めて作成中ですが、メニューボタンをクリックした時の「×」の動きが少し奇妙なのを直したいです。
できるだけ簡単な記述で教えていただけると助かります。
よろしくお願いいたします。

HTML
1<a class="menuButton" id="menuButton">
2      <div></div>
3      <div></div>
4      <div></div>
5</a>

SCSS
1.menuButton{
2    display: block;
3    height: 60px;
4    width: 60px;
5    background: #000;
6    position: fixed;
7    top: 0;
8    right: 0;
9    z-index: 10;
10    div{
11      height: 3px;
12      width: 30px;
13      background: #fff;
14      position: absolute;
15      top: 50%;
16      left: 50%;
17      transform: translate(-50%, -50%);
18      transition: 0.3s;
19      border-radius: 10px;
20      &:nth-of-type(1){
21        transform: translate(-50%, -12px);
22      }
23      &:nth-of-type(3){
24        transform: translate(-50%, 10px);
25      }
26    }
27  }
28  .menuButton.active div:nth-of-type(1){
29    transform: rotate(45deg) translate(-50%, 0);
30    transform-origin: 0% 50%;
31  }
32  .menuButton.active div:nth-of-type(2){
33    opacity: 0;
34  }
35  .menuButton.active div:nth-of-type(3){
36    transform: rotate(-45deg) translate(-50%, 0);
37    transform-origin: 0% 50%;
38  }
39  nav{
40    opacity: 0;
41    visibility: hidden;
42    transform:translate(20px, -20px);
43    transition: 0.3s;
44    position: fixed;
45    top: 0;
46    right: 0;
47    background: #efefef;
48    width: 100%;
49    height: 100%;
50    overflow: auto;
51    margin-top: 60px;
52    .list{
53      flex-direction: column;
54      li{
55        height: 60px;
56        line-height: 60px;
57        border-top: 1px solid #d8d8d8;
58        &:active{
59          background: #B8E5EA;
60        }
61        &:last-child{
62          border-bottom: 1px solid #d8d8d8;
63        }
64        a{
65          display: block;
66          color: #000;
67          padding-left: 30px;
68          &:hover{
69            border-bottom: none;
70          }
71        }
72      }
73    }
74  }

JS
1$(function(){
2  $("#menuButton").click(function(){
3    this.classList.toggle("active");
4  });
5});

Ftps

2021/08/24 09:20

少し奇妙というのはどのようなのか、できれば書いてください！あと、マークダウンがおかしいので直せたら直してください

cutegirl

2021/08/24 09:40

失礼しました。コード内容を変更しました。カクカクとした動きになります。スムーズな「×」になって欲しいです。

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

回答1件

ベストアンサー

通常時のtransform-originに0を指定し、かつアニメーションの対象をtransform, opacityだけに絞ってください。

DIFF
1.menuButton {
2  display: block;
3  height: 60px;
4  width: 60px;
5  background: #000;
6  position: fixed;
7  top: 0;
8  right: 0;
9  z-index: 10;
10
11  div {
12    height: 3px;
13    width: 30px;
14    border-radius: 10px;
15    background: #fff;
16    position: absolute;
17    top: 50%;
18    left: 50%;
19    transform: rotate(0deg) translate(-50%, -50%);
20
21-    transition: 0.3s;
22+    transition-duration: 0.3s;
23+    transition-property: transform, opacity;
24+    transform-origin: 0% 0%;
25
26    &:nth-of-type(1) {
27      transform: rotate(0deg) translate(-50%, -12px);
28    }
29
30    &:nth-of-type(3) {
31      transform: rotate(0deg) translate(-50%, 10px);
32    }
33  }
34}
35
36.menuButton.active div:nth-of-type(1) {
37  transform: rotate(45deg) translate(-50%, 0px);
38  transform-origin: 0% 50%;
39}
40
41.menuButton.active div:nth-of-type(2) {
42  opacity: 0;
43}
44
45.menuButton.active div:nth-of-type(3) {
46  transform: rotate(-45deg) translate(-50%, 0px);
47  transform-origin: 0% 50%;
48}