@douyinfe/semi-foundation 2.24.3 → 2.25.0

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/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 {

package/lib/cjs/sideSheet/sideSheet.scss

@@ -224,42 +224,52 @@ $module: #{$prefix}-sidesheet;
 
     &-animation-content_show_top{
         animation: #{$module}-slideShow_top $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_top{
         animation: #{$module}-slideHide_top $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_bottom{
         animation: #{$module}-slideShow_bottom $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_bottom{
         animation: #{$module}-slideHide_bottom $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_left{
         animation: #{$module}-slideShow_left $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_left{
         animation: #{$module}-slideHide_left $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_show_right{
         animation: #{$module}-slideShow_right $animation_duration-sideSheet_inner-show $animation_function-sideSheet_inner-show $animation_delay-sideSheet_inner-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-content_hide_right{
         animation: #{$module}-slideHide_right $animation_duration-sideSheet_inner-hide $animation_function-sideSheet_inner-hide $animation_delay-sideSheet_inner-hide;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_show{
         animation: #{$module}-opacityShow $animation_duration-sideSheet_mask-show $animation_function-sideSheet_mask-show $animation_delay-sideSheet_mask-show;
+        animation-fill-mode: forwards;
     }
 
     &-animation-mask_hide{
         animation: #{$module}-opacityHide $animation_duration-sideSheet_mask-hide $animation_function-sideSheet_mask-hide $animation_delay-sideSheet_mask-hide;
+        animation-fill-mode: forwards;
     }
 
 }

package/lib/cjs/skeleton/skeleton.css

@@ -71,6 +71,7 @@
   background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%);
   background-size: 400% 100%;
   animation: 1400ms skeleton-loading ease infinite;
+  animation-fill-mode: forwards;
 }
 @keyframes skeleton-loading {
   0% {

package/lib/cjs/skeleton/skeleton.scss

@@ -99,6 +99,7 @@ $module: #{$prefix}-skeleton;
             );
             background-size: 400% 100%;
             animation: $animation_duration-skeleton-highlight skeleton-loading $animation_function-skeleton-highlight infinite;
+            animation-fill-mode: forwards;
         }
     }
 

package/lib/cjs/spin/spin.css

@@ -25,12 +25,14 @@
 }
 .semi-spin-wrapper > svg {
   animation: 600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
   width: 20px;
   height: 20px;
 }
 .semi-spin-animate {
   display: inline-flex;
   animation: 1600ms linear infinite semi-animation-rotate;
+  animation-fill-mode: forwards;
 }
 .semi-spin-children {
   opacity: 0.5;

package/lib/cjs/spin/spin.scss

@@ -28,6 +28,7 @@ $module: #{$prefix}-spin;
 
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
+            animation-fill-mode: forwards;
             @include size($width-spin_middle);
         }
     }
@@ -35,6 +36,7 @@ $module: #{$prefix}-spin;
     &-animate {
         display: inline-flex;
         animation: $animation_duration-spin_customChildren-spin linear infinite #{$prefix}-animation-rotate;
+        animation-fill-mode: forwards;
     }
 
     &-children {

package/lib/cjs/switch/switch.css

@@ -56,6 +56,10 @@
   box-shadow: none;
   border: 1px var(--semi-color-border) solid;
 }
+.semi-switch-disabled .semi-switch-native-control {
+  pointer-events: none;
+  cursor: not-allowed;
+}
 .semi-switch-disabled.semi-switch-checked {
   border-color: transparent;
   background-color: var(--semi-color-success-disabled);

package/lib/cjs/switch/switch.scss

@@ -76,6 +76,11 @@ $module: #{$prefix}-switch;
             @include shadow-0;
             border: $width-switch_knob_disabled-border $color-switch_knob-border-default solid;
         }
+        
+        .#{$module}-native-control {
+            pointer-events: none;
+            cursor: not-allowed;
+        }
 
         &.#{$module}-checked {
             border-color: $color-switch_checked_disabled-border-default;

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

@@ -73,6 +73,5 @@ declare const numbers: {
     readonly DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: number;
     readonly DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT: number;
     readonly DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT: number;
-    readonly DEFAULT_EMPTYSLOT_HEIGHT: 52;
 };
 export { cssClasses, strings, numbers };

package/lib/cjs/table/constants.js

@@ -66,8 +66,7 @@ const DEFAULT_CELL_MIDDLE_PADDING_TOP = 12;
 const DEFAULT_CELL_MIDDLE_PADDING_BOTTOM = 12;
 const DEFAULT_CELL_SMALL_PADDING_TOP = 8;
 const DEFAULT_CELL_SMALL_PADDING_BOTTOM = 8;
-const DEFAULT_CELL_LINE_HEIGHT = 20;
-const DEFAULT_EMPTYSLOT_HEIGHT = 52; // normal size
+const DEFAULT_CELL_LINE_HEIGHT = 20; // normal size
 
 const DEFAULT_VIRTUALIZED_ROW_HEIGHT = DEFAULT_CELL_LINE_HEIGHT + DEFAULT_CELL_BORDER_WITH_BOTTOM + DEFAULT_CELL_BORDER_WITH_TOP + DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM;
 const DEFAULT_VIRTUALIZED_ROW_MIN_HEIGHT = DEFAULT_CELL_PADDING_TOP + DEFAULT_CELL_PADDING_BOTTOM + DEFAULT_CELL_BORDER_WITH_BOTTOM; // middle  size
@@ -103,7 +102,6 @@ const numbers = {
   DEFAULT_VIRTUALIZED_ROW_MIDDLE_MIN_HEIGHT,
   DEFAULT_VIRTUALIZED_SECTION_ROW_SMALL_HEIGHT: DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
   DEFAULT_VIRTUALIZED_ROW_SMALL_HEIGHT,
-  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT,
-  DEFAULT_EMPTYSLOT_HEIGHT
+  DEFAULT_VIRTUALIZED_ROW_SMALL_MIN_HEIGHT
 };
 exports.numbers = numbers;

package/lib/cjs/tabs/tabs.css

@@ -398,15 +398,19 @@
 }
 .semi-tabs-pane-animate-leftShow {
   animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-rightShow {
   animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-topShow {
   animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 .semi-tabs-pane-animate-bottomShow {
   animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s;
+  animation-fill-mode: forwards;
 }
 
 .semi-rtl .semi-tabs,

package/lib/cjs/tabs/tabs.scss

@@ -542,16 +542,20 @@ $module: #{$prefix}-tabs;
 
     &-pane-animate-leftShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-leftShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-rightShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-rightShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 
     &-pane-animate-topShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-topShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
     &-pane-animate-bottomShow{
         animation: $animation_duration-tabs_tabPanel-show #{$module}-panel-keyframe-bottomShow $animation_function-tabs_tabPanel-show $animation_delay-tabs_tabPanel-show;
+        animation-fill-mode: forwards;
     }
 }