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

Question

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

// アコーディンオープン前
$(function () {
  $('.list-menu').click(function () {
    $(this).next().animate({ width: 'toggle' });
    $('.side-bar__list-icon').addClass('close');
    $('.side-bar-show').addClass('open');
  });
});

// アコーディンオープン後
$(function () {
  $('.side-bar__menu').click(function () {
    $('.side-bar__list-icon').removeClass('close');
    $('.side-bar-show').removeClass('open');
  });
});

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

// アコーディンオープン前
$(function () {
  $('.list-menu').click.delay(1000).queue(function () {
    $(this).next().animate({ width: 'toggle' });
    $('.side-bar__list-icon').addClass('close');
    $('.side-bar-show').addClass('open');
  });
});

// アコーディンオープン後
$(function () {
  $('.side-bar__menu').click.delay(1000).queue(function () {
    $('.side-bar__list-icon').removeClass('close');
    $('.side-bar-show').removeClass('open');
  });
});

<div class="side-bar">
	<div class="side-bar__inner">
		<div class="side-bar__list-icon">
			<div class="list-icon__inner">
				<ul>
					<li class="list-menu">
						<!-- ハンバーガーメニューアイコン -->
						<svg class="menu" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
							<path class="Menu-icon-highligt" id="Menu-icon-highligt"
								d="M0,25V22H25v3ZM0,14V11H25v3ZM0,3V0H25V3Z" fill="#4ba0f0" />
						</svg>
					</li>
					<li class="list-icon"><a href="">
							<!-- お知らせアイコン -->
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
							</svg>
						</a>
					</li>
					<li class="list-icon"><a href="B">
							<!-- プロフィールアイコン -->
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
							</svg>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="side-bar-show">
			<!-- ハンバーガーメニューアイコン -->
			<svg class="menu side-bar__menu" xmlns="http://www.w3.org/2000/svg" width="25" height="25"
				viewBox="0 0 25 25">
				<path class="Menu-icon-highligt" id="Menu-icon-highligt" d="M0,25V22H25v3ZM0,14V11H25v3ZM0,3V0H25V3Z"
					fill="#fff" />
			</svg>
			<ul class="side-bar-show__list">
				<li class="show-menuーitem"><a class="show-menuーitem__link" href="A">お知らせ</a></li>
				<li class="show-menuーitem"><a class="show-menuーitem__link" href="B">プロフィール</a></li>
			</ul>
		</div>
	</div>
</div>

.side-bar {
    background-color: #0f273e;
    position: relative;
    // height: 1080px;

    &__inner {
        display: flex;

        .side-bar__list-icon {
            cursor: pointer;
            padding: 30px 35px 0;
            width: 96px;

            .list-icon__inner {
                .list-icon {
                    margin: 0 auto 40px;
                }

                .menu {
                    margin-bottom: 51px;
                }
                .menu:hover #Menu-icon-highligt{
                    transition: all 0.6s ease;
                    opacity: 0.8;
                    fill: #fff;
                }
            }
            svg:hover #rectangle_112 {
                transition: all 0.6s ease;
                opacity: 0.8;
                color: #4ba0f0;
                stroke: #4ba0f0;
            }

            #rectangle_112:hover {
                transition: all 0.6s ease;
                opacity: 0.8;
                color: #4ba0f0;
                stroke: #4ba0f0;
            }

            #Icon_awesome-pen:hover {
                transition: all 0.6s ease;
                opacity: 0.8;
                fill: #4ba0f0;
            }

            #path_3:hover {
                transition: all 0.6s ease;
                opacity: 0.8;
                fill: #4ba0f0;
                stroke: #4ba0f0;
            }

        }
        //アコーディオン開時に元のメニューバーを隠す
        .close {
            display: none;
            transition: 10s;
        }


/* ====================================================================
.side-bar アコーディオンOPEN時レイアウト
==================================================================== */
        .side-bar-show {
            display: none;
            padding: 31px 39px;
            width: 400px;
            transition: 5.0s;

            .side-bar__menu {
                cursor: pointer;
                margin-bottom: 51px;
            }

            &__list {
                .show-menuーitem {
                    &__link {
                        align-items: center;
                        color: #ffffff;
                        display: flex;
                        line-height: 1;
                        margin-bottom: 40px;
                        margin-right: 22px;
                        @include f(21, 'Noto Sans JP', 25);
                    }

                    &__icon {
                        margin-right: 22px;
                    }
                    &__link:hover{
                        opacity: 0.8;
                        transition: all 0.6s ease;
                        color: #4ba0f0;

                    }
                    &__link:hover #rectangle_112 {
                        stroke: #4ba0f0;
                        opacity: 0.8;
                        transition: all 0.6s ease;
                    }
                    &__link:hover #Icon_awesome-pen {
                        opacity: 0.8;
                        stroke: #4ba0f0;
                        fill:#4ba0f0;
                        transition: all 0.6s ease;
                    }

                    &__link:hover #path_3{
                        opacity: 0.8;
                        stroke: #4ba0f0;
                        fill:#4ba0f0;
                        transition: all 0.6s ease;
                    }

                    &__link:hover #user{
                        opacity: 0.8;
                        stroke: #4ba0f0;
                        transition: all 0.6s ease;
                    }
                }

                .show-menuーitem:nth-of-type(2):hover {
                    position: relative;

                    .show-menuーitem__sub-menu {
                        visibility: visible;
                        opacity: 1;
                        height: 88px;
                        position: absolute;
                        right: -130px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 214.59px;
                        transition: all 0.6s ease;
                        .sub-menu-item-wrap {
                            background-color: #193550;
                            display: flex;
                            flex-direction: column;
                            padding: 11px 60px 13px 19px;
                            position: relative;
                            .sub-menu-item {
                                &__link {
                                    color: #ffffff;
                                    line-height: 1.61;
                                    @include f(21, 'Noto Sans JP', 25);
                                }
                            }
                        }

                        .sub-menu-item-wrap::before {
                            border-bottom: 18px solid transparent;
                            border-right: 21px solid #193550;
                            border-top: 18px solid transparent;
                            content: '';
                            left: -21px;
                            position: absolute;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }
                }

                .show-menuーitem__sub-menu {
                    visibility: hidden;
                    opacity: 0;
                    .sub-menu-item-wrap{
                        display: none;
                    }
                }
            }

            .show-menuーitem:last-of-type {
                margin-bottom: 0;
            }

            .logout {
                border-top: 1px solid #ffffff;
                bottom: 10px;
                margin-bottom: 19px;
                position: absolute;
                width: 330px;

                &__inner {
                    margin-top: 16px;

                    &_link {
                        display: flex;
                        align-items: center;
                        color: #ffffff;
                        position: relative;
                        @include f(16,"Rajdhani",62.5);
                    }

                    &_img {
                        margin: 0 14px;
                    }

                    &_link:hover{
                        color: #4ba0f0;
                        opacity: 0.8;
                        transition: all 0.6s ease;
                    }
                    &_link:hover #loguot{
                        fill: #4ba0f0;
                        opacity: 0.8;
                        transition: all 0.6s ease;

                    }
                }
            }
        }
        .open {
            display: block;
            transition: 10s;
        }
        .side-bar__menu:hover #Menu-icon-highligt{
            opacity: 0.8;
            fill: #4ba0f0;
            transition: all 0.6s ease;
        }
    }
}

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

Comments

[退会済みユーザー]

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

[Fukusuke0604]

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

[hatena19]

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

[退会済みユーザー]

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

[退会済みユーザー]

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

[Fukusuke0604]

hatena19さま　XkUfuUdSPyGods2さま
たびたび済みません。HTML追記しました。
サイドバーは左サイドにあり、アコーディオンは右に開いて、左に閉じていく方法での実装となります。

サイドバークローズ時は、アイコンのみ表示。
サイドバーオープン後はリストのテキストが表示

です。

[hatena19]

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

[Fukusuke0604]

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

JSコードに関しては全て記載しております。

[hatena19]

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

Answer 1

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

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

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

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

body {
  margin: 0;
}
.side-bar__list-icon{
  transition: 3s;  
}
.side-bar-show {
  position: fixed;
  width: 200px;
  background: aqua;
  transform: translateX(-200px);
  transition: 3s;
}
.close {
  transform: translateX(-200px);
}
.open {
  transform: translateX(0);
}

// アコーディンオープン前
$(function () {
  
  $('.list-menu').click(function () {
    $('.side-bar__list-icon').addClass('close');
    $('.side-bar-show').addClass('open');
  });
});

// アコーディンオープン後
$(function () {
  $('.side-bar__menu').click(function () {
    $('.side-bar__list-icon').removeClass('close');
    $('.side-bar-show').removeClass('open');
  });
});

Comments

[Fukusuke0604]

何回もお付き合い頂き本当にありがとうございました。
無事に実装できました!!

Answer 2

toggleではshow/hideしてるだけなので一瞬です。（classの付け替えの場合CSSアニメーションも視野に入れる必要がありそう）
toggleをslideToggleに変更してみてはどうでしょう。
https://api.jquery.com/slidetoggle/