From 262f7cddd952b271b16665784afde73095def192 Mon Sep 17 00:00:00 2001
From: sunhao <sunhao@easycorp.ltd>
Date: Tue, 16 Apr 2024 13:38:05 +0800
Subject: [PATCH] * sidebar: fix animation not work as expected.

---
 lib/sidebar/src/style/sidebar.css  | 2 +-
 lib/sidebar/src/vanilla/sidebar.ts | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/lib/sidebar/src/style/sidebar.css b/lib/sidebar/src/style/sidebar.css
index 33467bf042..589bde7d6f 100644
--- a/lib/sidebar/src/style/sidebar.css
+++ b/lib/sidebar/src/style/sidebar.css
@@ -17,7 +17,7 @@
   @apply -hidden;
 }
 .sidebar.is-collapsed > .sidebar-gutter {
-  @apply -flex;
+  @apply !-flex;
 }
 
 .sidebar-gutter {
diff --git a/lib/sidebar/src/vanilla/sidebar.ts b/lib/sidebar/src/vanilla/sidebar.ts
index 98235d67ab..94f52dc465 100644
--- a/lib/sidebar/src/vanilla/sidebar.ts
+++ b/lib/sidebar/src/vanilla/sidebar.ts
@@ -103,7 +103,7 @@ export class Sidebar extends Component<SidebarOptions, {
         this._$gutter = $gutter;
 
         this.render();
-        $element.css({'--gutter-width': `${gutterWidth}px`, width: `var(--sidebar-${side}-width)`, '--sidebar-duration': typeof animation === 'number' ? `${animation}ms` : undefined});
+        $element.css({'--gutter-width': `${gutterWidth}px`, width: `var(--sidebar-${side}-width)`, '--sidebar-duration': typeof animation === 'number' ? `${animation}ms` : null});
 
         if (toggleBtn) {
             $gutter.append(`<button class="gutter-toggle" type="button"><span class="chevron-${side}"></span></button>`);
@@ -144,7 +144,11 @@ export class Sidebar extends Component<SidebarOptions, {
             });
         }
         if (animation) {
-            this.on('transitionend', (e) => {if (e.target === $element[0] && e.propertyName === 'width') $element.removeClass(TRANSITION_CLASS);});
+            this.on('transitionend', (e) => {
+                if (e.target === $element[0] && e.propertyName === 'width') {
+                    $element.removeClass(TRANSITION_CLASS);
+                }
+            });
             this._raf = requestAnimationFrame(() => {
                 $parent.addClass(ANIMATION_CLASS);
             });