jQuery .addclass()を滑らかに動かしたい。

jQuery .addclass()でサイバーの開閉を実装しましたが、サイドバーの開閉がカクカクしています。。。。

jQuery
1// アコーディンオープン前
2$(function () {
3  $('.list-menu').click(function () {
4    $(this).next().animate({ width: 'toggle' });
5    $('.side-bar__list-icon').addClass('close');
6    $('.side-bar-show').addClass('open');
7  });
8});
9
10// アコーディンオープン後
11$(function () {
12  $('.side-bar__menu').click(function () {
13    $('.side-bar__list-icon').removeClass('close');
14    $('.side-bar-show').removeClass('open');
15  });
16});

以下のように)click.delay(1000).queueとしてみたらサイドバーが開閉しなくなりました。。。。

jQuery
1// アコーディンオープン前
2$(function () {
3  $('.list-menu').click.delay(1000).queue(function () {
4    $(this).next().animate({ width: 'toggle' });
5    $('.side-bar__list-icon').addClass('close');
6    $('.side-bar-show').addClass('open');
7  });
8});
9
10// アコーディンオープン後
11$(function () {
12  $('.side-bar__menu').click.delay(1000).queue(function () {
13    $('.side-bar__list-icon').removeClass('close');
14    $('.side-bar-show').removeClass('open');
15  });
16});

HTML
1<div class="side-bar">
2	<div class="side-bar__inner">
3		<div class="side-bar__list-icon">
4			<div class="list-icon__inner">
5				<ul>
6					<li class="list-menu">
7						<!-- ハンバーガーメニューアイコン -->
8						<svg class="menu" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
9							<path class="Menu-icon-highligt" id="Menu-icon-highligt"
10								d="M0,25V22H25v3ZM0,14V11H25v3ZM0,3V0H25V3Z" fill="#4ba0f0" />
11						</svg>
12					</li>
13					<li class="list-icon"><a href="">
14							<!-- お知らせアイコン -->
15							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
16							</svg>
17						</a>
18					</li>
19					<li class="list-icon"><a href="B">
20							<!-- プロフィールアイコン -->
21							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
22							</svg>
23						</a>
24					</li>
25				</ul>
26			</div>
27		</div>
28		<div class="side-bar-show">
29			<!-- ハンバーガーメニューアイコン -->
30			<svg class="menu side-bar__menu" xmlns="http://www.w3.org/2000/svg" width="25" height="25"
31				viewBox="0 0 25 25">
32				<path class="Menu-icon-highligt" id="Menu-icon-highligt" d="M0,25V22H25v3ZM0,14V11H25v3ZM0,3V0H25V3Z"
33					fill="#fff" />
34			</svg>
35			<ul class="side-bar-show__list">
36				<li class="show-menuーitem"><a class="show-menuーitem__link" href="A">お知らせ</a></li>
37				<li class="show-menuーitem"><a class="show-menuーitem__link" href="B">プロフィール</a></li>
38			</ul>
39		</div>
40	</div>
41</div>

CSS
1.side-bar {
2    background-color: #0f273e;
3    position: relative;
4    // height: 1080px;
5
6    &__inner {
7        display: flex;
8
9        .side-bar__list-icon {
10            cursor: pointer;
11            padding: 30px 35px 0;
12            width: 96px;
13
14            .list-icon__inner {
15                .list-icon {
16                    margin: 0 auto 40px;
17                }
18
19                .menu {
20                    margin-bottom: 51px;
21                }
22                .menu:hover #Menu-icon-highligt{
23                    transition: all 0.6s ease;
24                    opacity: 0.8;
25                    fill: #fff;
26                }
27            }
28            svg:hover #rectangle_112 {
29                transition: all 0.6s ease;
30                opacity: 0.8;
31                color: #4ba0f0;
32                stroke: #4ba0f0;
33            }
34
35            #rectangle_112:hover {
36                transition: all 0.6s ease;
37                opacity: 0.8;
38                color: #4ba0f0;
39                stroke: #4ba0f0;
40            }
41
42            #Icon_awesome-pen:hover {
43                transition: all 0.6s ease;
44                opacity: 0.8;
45                fill: #4ba0f0;
46            }
47
48            #path_3:hover {
49                transition: all 0.6s ease;
50                opacity: 0.8;
51                fill: #4ba0f0;
52                stroke: #4ba0f0;
53            }
54
55        }
56        //アコーディオン開時に元のメニューバーを隠す
57        .close {
58            display: none;
59            transition: 10s;
60        }
61
62
63/* ====================================================================
64.side-bar アコーディオンOPEN時レイアウト
65==================================================================== */
66        .side-bar-show {
67            display: none;
68            padding: 31px 39px;
69            width: 400px;
70            transition: 5.0s;
71
72            .side-bar__menu {
73                cursor: pointer;
74                margin-bottom: 51px;
75            }
76
77            &__list {
78                .show-menuーitem {
79                    &__link {
80                        align-items: center;
81                        color: #ffffff;
82                        display: flex;
83                        line-height: 1;
84                        margin-bottom: 40px;
85                        margin-right: 22px;
86                        @include f(21, 'Noto Sans JP', 25);
87                    }
88
89                    &__icon {
90                        margin-right: 22px;
91                    }
92                    &__link:hover{
93                        opacity: 0.8;
94                        transition: all 0.6s ease;
95                        color: #4ba0f0;
96
97                    }
98                    &__link:hover #rectangle_112 {
99                        stroke: #4ba0f0;
100                        opacity: 0.8;
101                        transition: all 0.6s ease;
102                    }
103                    &__link:hover #Icon_awesome-pen {
104                        opacity: 0.8;
105                        stroke: #4ba0f0;
106                        fill:#4ba0f0;
107                        transition: all 0.6s ease;
108                    }
109
110                    &__link:hover #path_3{
111                        opacity: 0.8;
112                        stroke: #4ba0f0;
113                        fill:#4ba0f0;
114                        transition: all 0.6s ease;
115                    }
116
117                    &__link:hover #user{
118                        opacity: 0.8;
119                        stroke: #4ba0f0;
120                        transition: all 0.6s ease;
121                    }
122                }
123
124                .show-menuーitem:nth-of-type(2):hover {
125                    position: relative;
126
127                    .show-menuーitem__sub-menu {
128                        visibility: visible;
129                        opacity: 1;
130                        height: 88px;
131                        position: absolute;
132                        right: -130px;
133                        top: 50%;
134                        transform: translateY(-50%);
135                        width: 214.59px;
136                        transition: all 0.6s ease;
137                        .sub-menu-item-wrap {
138                            background-color: #193550;
139                            display: flex;
140                            flex-direction: column;
141                            padding: 11px 60px 13px 19px;
142                            position: relative;
143                            .sub-menu-item {
144                                &__link {
145                                    color: #ffffff;
146                                    line-height: 1.61;
147                                    @include f(21, 'Noto Sans JP', 25);
148                                }
149                            }
150                        }
151
152                        .sub-menu-item-wrap::before {
153                            border-bottom: 18px solid transparent;
154                            border-right: 21px solid #193550;
155                            border-top: 18px solid transparent;
156                            content: '';
157                            left: -21px;
158                            position: absolute;
159                            position: absolute;
160                            top: 50%;
161                            transform: translateY(-50%);
162                        }
163                    }
164                }
165
166                .show-menuーitem__sub-menu {
167                    visibility: hidden;
168                    opacity: 0;
169                    .sub-menu-item-wrap{
170                        display: none;
171                    }
172                }
173            }
174
175            .show-menuーitem:last-of-type {
176                margin-bottom: 0;
177            }
178
179            .logout {
180                border-top: 1px solid #ffffff;
181                bottom: 10px;
182                margin-bottom: 19px;
183                position: absolute;
184                width: 330px;
185
186                &__inner {
187                    margin-top: 16px;
188
189                    &_link {
190                        display: flex;
191                        align-items: center;
192                        color: #ffffff;
193                        position: relative;
194                        @include f(16,"Rajdhani",62.5);
195                    }
196
197                    &_img {
198                        margin: 0 14px;
199                    }
200
201                    &_link:hover{
202                        color: #4ba0f0;
203                        opacity: 0.8;
204                        transition: all 0.6s ease;
205                    }
206                    &_link:hover #loguot{
207                        fill: #4ba0f0;
208                        opacity: 0.8;
209                        transition: all 0.6s ease;
210
211                    }
212                }
213            }
214        }
215        .open {
216            display: block;
217            transition: 10s;
218        }
219        .side-bar__menu:hover #Menu-icon-highligt{
220            opacity: 0.8;
221            fill: #4ba0f0;
222            transition: all 0.6s ease;
223        }
224    }
225}
226

どうすればスムーズにサイドバーの開閉ができるようになるでしょうか?

退会済みユーザー

2022/08/04 01:13

まずは、addClass/removeClassしてるクラス名の定義を書き出そう。

Fukusuke0604

2022/08/04 01:19

コメントありがとうございます。CSSも追記しました。

hatena19

2022/08/04 01:28

htmlコードも提示してください。また、「サイドバーの開閉」とは具体的にどのような動作でしょうか。サイドバーが左端または右端から出てくる(幅が変化、または、画面外から横移動)ということでしょうか。その辺を詳細に説明してください。

退会済みユーザー

2022/08/04 01:50

CSSにアニメーションの指定はなし？

退会済みユーザー

2022/08/04 02:27

transitionするなら、width/heightをいじったり、top/leftをいじったり、opacityをいじったりするのが定番なような。displayってアニメーションかかる属性だったかなぁ。

Fukusuke0604

2022/08/04 02:50 編集

hatena19さま　XkUfuUdSPyGods2さまたびたび済みません。HTML追記しました。サイドバーは左サイドにあり、アコーディオンは右に開いて、左に閉じていく方法での実装となります。サイドバークローズ時は、アイコンのみ表示。サイドバーオープン後はリストのテキストが表示です。

hatena19

2022/08/04 03:03

cssコードも抜粋ではなく動作確認できるすべてを提示してください。 jsコードもそれだけですか。

Fukusuke0604

2022/08/04 04:15 編集

hatena19　さま SCSSコード追記しました。 HTMLに関しては、全て書くと文字数の制限で載せられませんでした。。。。 JSコードに関しては全て記載しております。

hatena19

2022/08/04 04:34

SCSSコードがコンパイルエラーになり動作確認できませんので、考え方と、最低限のシンプルなCSSコード例を回答しましので、それを参考にして実装してください。

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

回答2件

ベストアンサー

display: none;とdisplay: block;は表示、非表示の２つの状態しかないので、アニメーションしません。

サイドバーは左サイドにあり、アコーディオンは右に開いて、左に閉じていく方法での実装となります。

ということなら画面外に配置しておいて、画面内に横移動させるという動作にするといいでしょう。
'transform: translateX();'を使うのがシンプルな実装になります。

全体像が不明なので、とりあえず分かっている部分だけで最低限のコード例を提示しておきますので、これを参考にしてください。

css
1body {
2  margin: 0;
3}
4.side-bar__list-icon{
5  transition: 3s;  
6}
7.side-bar-show {
8  position: fixed;
9  width: 200px;
10  background: aqua;
11  transform: translateX(-200px);
12  transition: 3s;
13}
14.close {
15  transform: translateX(-200px);
16}
17.open {
18  transform: translateX(0);
19}

JavaScript/JQuery
1// アコーディンオープン前
2$(function () {
3  
4  $('.list-menu').click(function () {
5    $('.side-bar__list-icon').addClass('close');
6    $('.side-bar-show').addClass('open');
7  });
8});
9
10// アコーディンオープン後
11$(function () {
12  $('.side-bar__menu').click(function () {
13    $('.side-bar__list-icon').removeClass('close');
14    $('.side-bar-show').removeClass('open');
15  });
16});