@douyinfe/semi-foundation 2.25.0-beta.0 → 2.25.1

package/button/iconButton.scss

@@ -25,6 +25,7 @@ $module: #{$prefix}-button;
                 width: 16px;
                 height: 16px;
                 animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation-fill-mode: forwards;
             }
         }
     }

package/carousel/carousel.scss

@@ -44,21 +44,25 @@ $module: #{$prefix}-carousel;
             .#{$module}-content-item-slide-out {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
+                animation-fill-mode: forwards;
             }
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
                 animation: #{$module}-content-item-keyframe-slide-out-reverse;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 animation: #{$module}-content-item-keyframe-slide-in-reverse;
+                animation-fill-mode: forwards;
             }
         }
     }

package/input/input.scss

@@ -593,6 +593,7 @@ $module: #{$prefix}-input;
 
         // select与autocomplete的border-radius都是基于select
         .#{$prefix}-select,
+        .#{$prefix}-tagInput,
         .#{$prefix}-cascader,
         .#{$prefix}-tree-select,
         & > .#{$module}-wrapper {
@@ -624,6 +625,7 @@ $module: #{$prefix}-input;
 
         .#{$prefix}-input-number,
         .#{$prefix}-datepicker,
+        .#{$prefix}-timepicker,
         .#{$prefix}-autocomplete {
             border-radius: 0;
 

package/lib/cjs/button/iconButton.css

@@ -18,6 +18,7 @@
   width: 16px;
   height: 16px;
   animation: 0.6s linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
 }
 .semi-button.semi-button-with-icon-only {
   padding-left: 8px;

package/lib/cjs/button/iconButton.scss

@@ -25,6 +25,7 @@ $module: #{$prefix}-button;
                 width: 16px;
                 height: 16px;
                 animation: .6s linear infinite #{$prefix}-animation-rotate;
+                animation-fill-mode: forwards;
             }
         }
     }

package/lib/cjs/carousel/carousel.css

@@ -34,16 +34,20 @@
 .semi-carousel-content-slide .semi-carousel-content-item-slide-out {
   display: block;
   animation: semi-carousel-content-item-keyframe-slide-out;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-slide .semi-carousel-content-item-slide-in {
   display: block;
   animation: semi-carousel-content-item-keyframe-slide-in;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-reverse .semi-carousel-content-item-slide-out {
   animation: semi-carousel-content-item-keyframe-slide-out-reverse;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-content-reverse .semi-carousel-content-item-slide-in {
   animation: semi-carousel-content-item-keyframe-slide-in-reverse;
+  animation-fill-mode: forwards;
 }
 .semi-carousel-indicator {
   display: flex;

package/lib/cjs/carousel/carousel.scss

@@ -44,21 +44,25 @@ $module: #{$prefix}-carousel;
             .#{$module}-content-item-slide-out {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
+                animation-fill-mode: forwards;
             }
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
                 animation: #{$module}-content-item-keyframe-slide-out-reverse;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 animation: #{$module}-content-item-keyframe-slide-in-reverse;
+                animation-fill-mode: forwards;
             }
         }
     }

package/lib/cjs/input/input.css

@@ -451,26 +451,31 @@
   flex-wrap: wrap;
 }
 .semi-input-group .semi-select,
+.semi-input-group .semi-tagInput,
 .semi-input-group .semi-cascader,
 .semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper {
   border-radius: 0;
 }
 .semi-input-group .semi-select:first-child,
+.semi-input-group .semi-tagInput:first-child,
 .semi-input-group .semi-cascader:first-child,
 .semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child {
   border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
 }
 .semi-input-group .semi-select:last-child,
+.semi-input-group .semi-tagInput:last-child,
 .semi-input-group .semi-cascader:last-child,
 .semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
 }
 .semi-input-group .semi-select:not(:last-child),
+.semi-input-group .semi-tagInput:not(:last-child),
 .semi-input-group .semi-cascader:not(:last-child),
 .semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) {
   position: relative;
 }
 .semi-input-group .semi-select:not(:last-child)::after,
+.semi-input-group .semi-tagInput:not(:last-child)::after,
 .semi-input-group .semi-cascader:not(:last-child)::after,
 .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after {
   content: "";
@@ -483,11 +488,13 @@
 }
 .semi-input-group .semi-input-number,
 .semi-input-group .semi-datepicker,
+.semi-input-group .semi-timepicker,
 .semi-input-group .semi-autocomplete {
   border-radius: 0;
 }
 .semi-input-group .semi-input-number .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete .semi-datepicker-range-input {
   border-radius: 0;
 }
@@ -495,6 +502,8 @@
 .semi-input-group .semi-input-number:first-child .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker:first-child .semi-input-wrapper,
 .semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker:first-child .semi-input-wrapper,
+.semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:first-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input {
   border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
@@ -503,17 +512,21 @@
 .semi-input-group .semi-input-number:last-child .semi-datepicker-range-input,
 .semi-input-group .semi-datepicker:last-child .semi-input-wrapper,
 .semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input,
+.semi-input-group .semi-timepicker:last-child .semi-input-wrapper,
+.semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:last-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input {
   border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
 }
 .semi-input-group .semi-input-number:not(:last-child),
 .semi-input-group .semi-datepicker:not(:last-child),
+.semi-input-group .semi-timepicker:not(:last-child),
 .semi-input-group .semi-autocomplete:not(:last-child) {
   position: relative;
 }
 .semi-input-group .semi-input-number:not(:last-child)::after,
 .semi-input-group .semi-datepicker:not(:last-child)::after,
+.semi-input-group .semi-timepicker:not(:last-child)::after,
 .semi-input-group .semi-autocomplete:not(:last-child)::after {
   content: "";
   background-color: var(--semi-color-border);

package/lib/cjs/input/input.scss

@@ -593,6 +593,7 @@ $module: #{$prefix}-input;
 
         // select与autocomplete的border-radius都是基于select
         .#{$prefix}-select,
+        .#{$prefix}-tagInput,
         .#{$prefix}-cascader,
         .#{$prefix}-tree-select,
         & > .#{$module}-wrapper {
@@ -624,6 +625,7 @@ $module: #{$prefix}-input;
 
         .#{$prefix}-input-number,
         .#{$prefix}-datepicker,
+        .#{$prefix}-timepicker,
         .#{$prefix}-autocomplete {
             border-radius: 0;
 

package/lib/cjs/modal/modal.css

@@ -163,18 +163,22 @@
 
 .semi-modal-content-animate-show {
   animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-content-animate-hide {
   animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-show {
   animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 .semi-modal-mask-animate-hide {
   animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards;
+  animation-fill-mode: forwards;
 }
 
 @keyframes semi-modal-content-keyframe-show {

package/lib/cjs/modal/modal.scss

@@ -209,18 +209,22 @@ $module: #{$prefix}-modal;
 
 .#{$module}-content-animate-show {
     animation: $animation_duration-modal-show #{$module}-content-keyframe-show $animation_function-modal-show $animation_delay-modal-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-content-animate-hide {
     animation: $animation_duration-modal-hide #{$module}-content-keyframe-hide $animation_function-modal-hide $animation_delay-modal-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-show {
     animation: $animation_duration-modal_mask-show #{$module}-mask-keyframe-show $animation_function-modal_mask-show $animation_delay-modal_mask-show forwards;
+    animation-fill-mode: forwards;
 }
 
 .#{$module}-mask-animate-hide {
     animation: $animation_duration-modal_mask-hide #{$module}-mask-keyframe-hide $animation_function-modal_mask-hide $animation_delay-modal_mask-hide forwards;
+    animation-fill-mode: forwards;
 }
 
 

package/lib/cjs/notification/notification.css

@@ -264,39 +264,51 @@
 }
 .semi-notification-notice-animation-show_top {
   animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_top {
   animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_topLeft {
   animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_topLeft {
   animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_topRight {
   animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_topRight {
   animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottom {
   animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottom {
   animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottomLeft {
   animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottomLeft {
   animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-show_bottomRight {
   animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-notification-notice-animation-hide_bottomRight {
   animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms;
+  animation-fill-mode: forwards;
 }
 
 .semi-notification-notice.semi-notification-notice-rtl {

package/lib/cjs/notification/notification.scss

@@ -299,53 +299,65 @@ $module: #{$prefix}-notification;
             }
         }
 
-  
+
 
         &-animation-show_top{
             animation: #{$module}-slideShow_top $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_top{
             animation: #{$module}-slideHide_top $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topLeft{
             animation: #{$module}-slideShow_topLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topLeft{
             animation: #{$module}-slideHide_topLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_topRight{
             animation: #{$module}-slideShow_topRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_topRight{
             animation: #{$module}-slideHide_topRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottom{
             animation: #{$module}-slideShow_bottom $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottom{
             animation: #{$module}-slideHide_bottom $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
 
         &-animation-show_bottomLeft{
             animation: #{$module}-slideShow_bottomLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomLeft{
             animation: #{$module}-slideHide_bottomLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
         &-animation-show_bottomRight{
             animation: #{$module}-slideShow_bottomRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+            animation-fill-mode: forwards;
         }
 
         &-animation-hide_bottomRight{
             animation: #{$module}-slideHide_bottomRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+            animation-fill-mode: forwards;
         }
     }
 }

package/lib/cjs/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: string[];
+    BOUNDARY_SET: ("end" | "start")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {
@@ -10,8 +10,8 @@ declare const strings: {
         SCROLL: string;
     };
     BOUNDARY_MAP: {
-        START: string;
-        END: string;
+        readonly START: "start";
+        readonly END: "end";
     };
     OVERFLOW_DIR: {
         NONE: number;
@@ -19,5 +19,7 @@ declare const strings: {
         SHRINK: number;
     };
 };
-declare const numbers: {};
+declare const numbers: {
+    MINIMUM_HTML_ELEMENT_WIDTH: number;
+};
 export { cssClasses, strings, numbers };

package/lib/cjs/overflowList/constants.js

@@ -33,5 +33,7 @@ const strings = {
   OVERFLOW_DIR
 };
 exports.strings = strings;
-const numbers = {};
+const numbers = {
+  MINIMUM_HTML_ELEMENT_WIDTH: 4
+};
 exports.numbers = numbers;

package/lib/cjs/overflowList/foundation.d.ts

@@ -3,6 +3,7 @@ export interface OverflowListAdapter extends DefaultAdapter {
     updateStates: (state: any) => void;
     updateVisibleState: (visible: Map<string, boolean>) => void;
     notifyIntersect: (res: any) => void;
+    getItemSizeMap: () => Map<string, number>;
 }
 declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter> {
     constructor(adapter: OverflowListAdapter);
@@ -10,6 +11,7 @@ declare class OverflowListFoundation extends BaseFoundation<OverflowListAdapter>
     isScrollMode: () => boolean;
     getOverflowItem(): Array<Array<Record<string, any>>>;
     handleIntersect(entries: Array<IntersectionObserverEntry>): void;
-    handlePartition(growing: number): void;
+    getReversedItems: () => any;
+    handleCollapseOverflow(): void;
 }
 export default OverflowListFoundation;

package/lib/cjs/overflowList/foundation.js

@@ -29,6 +29,13 @@ class OverflowListFoundation extends _foundation.default {
       } = this.getProps();
       return renderMode === 'scroll';
     };
+
+    this.getReversedItems = () => {
+      const {
+        items
+      } = this.getProps();
+      return (0, _cloneDeep2.default)(items).reverse();
+    };
   }
 
   getOverflowItem() {
@@ -95,54 +102,68 @@ class OverflowListFoundation extends _foundation.default {
     this._adapter.notifyIntersect(res);
   }
 
-  handlePartition(growing) {
+  handleCollapseOverflow() {
+    const {
+      minVisibleItems,
+      collapseFrom
+    } = this.getProps();
     const {
-      direction,
-      overflow,
-      lastOverflowCount,
-      visible
+      overflowWidth,
+      containerWidth,
+      pivot: statePivot,
+      overflowStatus
     } = this.getStates();
     const {
-      minVisibleItems,
-      collapseFrom,
-      items
+      items,
+      onOverflow
     } = this.getProps();
-    let updateState = {};
+    let itemWidths = overflowWidth,
+        _pivot = 0;
+    let overflowed = false;
 
-    if (growing === OverflowDirection.NONE) {
-      updateState = {
-        direction: OverflowDirection.NONE
-      };
-    }
+    for (const size of this._adapter.getItemSizeMap().values()) {
+      itemWidths += size; // 触发overflow
 
-    if (growing === OverflowDirection.GROW) {
-      const updatedOverflowCount = direction === OverflowDirection.NONE ? overflow.length : lastOverflowCount;
-      updateState = {
-        direction: OverflowDirection.GROW,
-        lastOverflowCount: updatedOverflowCount,
-        overflow: [],
-        visible: items
-      };
-    }
+      if (itemWidths > containerWidth) {
+        overflowed = true;
+        break;
+      } // 顺利遍历完整个列表，说明不存在overflow，直接渲染全部
 
-    if (growing === OverflowDirection.SHRINK && visible.length > minVisibleItems) {
-      const collapseFromStart = collapseFrom === Boundary.START;
-      const newVisible = visible.slice();
-      const next = collapseFromStart ? newVisible.shift() : newVisible.pop();
-
-      if (next !== undefined) {
-        updateState = {
-          // set SHRINK mode unless a GROW is already in progress.
-          // GROW shows all items then shrinks until it settles, so we
-          // preserve the fact that the original trigger was a GROW.
-          direction: direction !== OverflowDirection.GROW ? OverflowDirection.SHRINK : direction,
-          overflow: collapseFromStart ? [...overflow, next] : [next, ...overflow],
-          visible: newVisible
-        };
+
+      if (_pivot === items.length - 1) {
+        this._adapter.updateStates({
+          overflowStatus: "normal",
+          pivot: items.length - 1,
+          visible: items,
+          overflow: []
+        });
+
+        break;
       }
+
+      _pivot++;
     }
 
-    this._adapter.updateStates(updateState);
+    if (overflowed) {
+      const pivot = Math.max(minVisibleItems, _pivot);
+      const isCollapseFromStart = collapseFrom === Boundary.START;
+      const visible = isCollapseFromStart ? this.getReversedItems().slice(0, pivot).reverse() : items.slice(0, pivot);
+      const overflow = isCollapseFromStart ? this.getReversedItems().slice(pivot).reverse() : items.slice(pivot);
+
+      this._adapter.updateStates({
+        overflowStatus: "overflowed",
+        pivot: pivot,
+        visible,
+        overflow
+      }); // trigger onOverflow
+
+
+      if (statePivot !== pivot) {
+        onOverflow(overflow);
+      }
+
+      return;
+    }
   }
 
 }

package/lib/cjs/popover/popover.css

@@ -54,9 +54,11 @@
 }
 .semi-popover-animation-show {
   animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 .semi-popover-animation-hide {
   animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 
 .semi-popover-wrapper .semi-popover-icon-arrow {

package/lib/cjs/popover/popover.scss

@@ -79,10 +79,12 @@ $module-icon: #{$module}-icon-arrow;
     }
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-popover-in $animation_function-popover-in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-popover-out $animation_function-popover-out;
+        animation-fill-mode: forwards;
     }
 }
 

package/lib/cjs/sideSheet/sideSheet.css

@@ -186,33 +186,43 @@
 }
 .semi-sidesheet-animation-content_show_top {
   animation: semi-sidesheet-slideShow_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_top {
   animation: semi-sidesheet-slideHide_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_bottom {
   animation: semi-sidesheet-slideShow_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_bottom {
   animation: semi-sidesheet-slideHide_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_left {
   animation: semi-sidesheet-slideShow_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_left {
   animation: semi-sidesheet-slideHide_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_show_right {
   animation: semi-sidesheet-slideShow_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-content_hide_right {
   animation: semi-sidesheet-slideHide_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-mask_show {
   animation: semi-sidesheet-opacityShow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 .semi-sidesheet-animation-mask_hide {
   animation: semi-sidesheet-opacityHide 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
+  animation-fill-mode: forwards;
 }
 
 .semi-sidesheet-fixed .semi-sidesheet-inner {