* sidebar: fix animation not work as expected.

easysoft · Apr 16, 2024 · 262f7cd · 262f7cd
1 parent 9b14299
commit 262f7cd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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);
             });