@douyinfe/semi-foundation 2.17.1 → 2.18.0-beta.0

package/lib/cjs/rating/rating.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-rating;
 
@@ -37,6 +38,7 @@ $module: #{$prefix}-rating;
         color: inherit;
         cursor: pointer;
         transition: all 0.5s;
+        transform:scale($transform-scale-rating);
 
         &:not(:last-child) {
             margin-right: $spacing-rating_item-marginRight;
@@ -75,6 +77,7 @@ $module: #{$prefix}-rating;
 
         &-first,
         &-second {
+            transition: color $transition_duration-rating-color $transition_function-rating-color $transition_delay-rating-color;
             color: $color-rating-bg-default;
             user-select: none;
         }

package/lib/cjs/scrollList/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/scrollList/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-scrollList_selected_item-bg: var(--semi-transition_duration-fastest); // 滚动列表选中选项-背景颜色-动画持续时间
+$transition_function-scrollList_selected_item-bg: var(--semi-transition_function-easeOut); // 滚动列表选中选项-背景颜色-过渡曲线
+$transition_delay-scrollList_selected_item-bg: 0ms; // 滚动列表选中选项-背景颜色-延迟时间

package/lib/cjs/scrollList/scrollList.css

@@ -69,6 +69,7 @@
   justify-content: center;
   cursor: pointer;
   background-color: transparent;
+  transition: background-color var(--semi-transition_duration-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel,
 .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel {

package/lib/cjs/scrollList/scrollList.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 // @import '../theme/_font.scss';
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-scrolllist;
 
@@ -38,11 +39,9 @@ $module: #{$prefix}-scrolllist;
 
         .#{$module}-item-wheel .#{$module}-list-outer-nocycle,
         .#{$module}-item {
-
             & > ul {
-
                 &:before {
-                    content: "";
+                    content: '';
                     display: block;
                     width: 100%;
                     height: ($height-scrollList - $height-scrollList_item) / 2;
@@ -63,7 +62,6 @@ $module: #{$prefix}-scrolllist;
 
         .#{$module}-item,
         .#{$module}-item-wheel .#{$module}-list-outer {
-
             & > ul {
                 box-sizing: border-box;
                 width: 100%;
@@ -84,7 +82,7 @@ $module: #{$prefix}-scrolllist;
                     // padding: 8px 18px;
                     cursor: pointer;
                     background-color: $color-scrollList_item-bg;
-
+                    transition: background-color $transition_duration-scrollList_selected_item-bg $transition_function-scrollList_selected_item-bg $transition_delay-scrollList_selected_item-bg;
                     &.#{$module}-item-sel {
                         background: $color-scrollList_selected_item-bg;
                         color: $color-scrollList_selected_item-text;
@@ -147,14 +145,14 @@ $module: #{$prefix}-scrolllist;
                     top: 0;
                     margin-top: $spacing-scrollList_item_wheel_list_shade_pre-marginTop;
                     background: $color-scrollList-bg;
-                    opacity: .5;
+                    opacity: 0.5;
                 }
 
                 &-post {
                     top: 50%;
                     margin-top: $spacing-scrollList_item_wheel_list_shade_post-marginTop;
                     background: $color-scrollList-bg;
-                    opacity: .5;
+                    opacity: 0.5;
                 }
             }
 
@@ -180,4 +178,4 @@ $module: #{$prefix}-scrolllist;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/select/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/select/animation.scss

@@ -0,0 +1,15 @@
+$transition_duration-select-bg: var(--semi-transition_duration-faster);//选择器-背景色-动画持续时间
+$transition_function-select-bg: var(--semi-transition_function-easeIn);//选择器-背景色-过渡曲线
+$transition_delay-select-bg: var(--semi-transition_delay-fastest);//选择器-背景色-延迟时间
+
+$transition_duration-select-border: var(--semi-transition_duration-faster);//选择器-边框-动画持续时间
+$transition_function-select-border: var(--semi-transition_function-easeIn);//选择器-边框-过渡曲线
+$transition_delay-select-border: var(--semi-transition_delay-fastest);//选择器-边框-延迟时间
+
+$transition_duration-select_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_function-select_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
+$transition_delay-select_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间
+
+// transform token
+$transform_scale-select: var(--semi-transform_scale-none);//选择框-变大
+$transform_rotate-select-arrow: var(--semi-transform-rotate-none);//选择框-箭头-旋转

package/lib/cjs/select/option.scss

@@ -20,6 +20,7 @@ $multiple: #{$module}-multiple;
     align-items: center;
     cursor: pointer;
     box-sizing: border-box;
+    transition: background-color $transition_duration-select_option-bg $transition_function-select_option-bg $transition_delay-select_option-bg;
 
     &-icon {
         width: $width-select_option_tick;

package/lib/cjs/select/select.css

@@ -11,13 +11,14 @@
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
-  border-radius: 0;
+  border-radius: 0px;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
   cursor: pointer;
   box-sizing: border-box;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-select-option-icon {
   width: 12px;
@@ -88,6 +89,8 @@
   position: relative;
   outline: none;
   cursor: pointer;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-select:hover {
   background-color: var(--semi-color-fill-1);
@@ -272,6 +275,7 @@
   width: 32px;
   color: var(--semi-color-text-2);
   flex-shrink: 0;
+  transform: rotate(var(--semi-transform-rotate-none));
 }
 .semi-select-arrow-empty {
   display: flex;
@@ -381,7 +385,7 @@
 .semi-select-option-list {
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 0 0 0;
+  padding: 0px 0px 0px 0px;
 }
 .semi-select-option-list-chosen .semi-select-option-icon {
   display: flex;

package/lib/cjs/select/select.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
-@import './option.scss';
 @import './variables.scss';
+@import "./animation.scss";
+@import './option.scss';
 @import './mixin.scss';
 
 $module: #{$prefix}-select;
@@ -21,7 +22,9 @@ $multiple: #{$module}-multiple;
     position: relative;
     outline: none;
     cursor: pointer;
-
+    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
+    border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
+    transform:scale($transform_scale-select);
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -259,6 +262,8 @@ $multiple: #{$module}-multiple;
         width: $width-select_arrow;
         color: $color-select-icon-default;
         flex-shrink: 0;
+        transform: rotate($transform_rotate-select-arrow);
+
 
         &-empty {
             // 不显示arrow时，右侧留出12px空白

package/lib/cjs/select/variables.scss

@@ -91,14 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
-$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
-$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
-$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
-$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
+$spacing-select_option_list-paddingTop: 0px; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0px; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
-$radius-select_option: 0; // 选择器待选项圆角
+$radius-select_option: 0px; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

package/lib/cjs/sideSheet/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/sideSheet/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-sideSheet_mask-bg: var(--semi-transition_delay-fastest); // 侧边栏打开后-蒙层颜色-动画持续时间
+$transition_function-sideSheet_mask-bg: var(--semi-transition_function-easeOut); // 侧边栏打开后-蒙层颜色-过渡曲线
+$transition_delay-sideSheet_mask-bg: 0ms; // 侧边栏打开后-蒙层颜色-延迟时间
+
+$transition_duration-sideSheet_inner: var(--semi-transition_delay-fastest); // 侧边栏-动画持续时间
+$transition_function-sideSheet_inner: var(--semi-transition_function-easeOut); // 侧边栏-过渡曲线
+$transition_delay-sideSheet_inner: 0ms; // 侧边栏-延迟时间

package/lib/cjs/sideSheet/sideSheet.css

@@ -69,6 +69,7 @@
   overflow: auto;
   background-color: var(--semi-color-bg-2);
   border: 0;
+  transition: var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-sidesheet-header {
   display: flex;
@@ -94,8 +95,11 @@
   width: 100%;
   height: 100%;
   background-color: var(--semi-color-overlay-bg);
+  opacity: 1;
+  transition: opacity var(--semi-transition_delay-fastest) var(--semi-transition_function-easeOut) 0ms;
 }
 .semi-sidesheet-mask-hidden {
+  opacity: 0;
   display: none;
 }
 .semi-sidesheet-footer {

package/lib/cjs/sideSheet/sideSheet.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-sidesheet;
 
@@ -85,6 +86,8 @@ $module: #{$prefix}-sidesheet;
         background-color: $color-sideSheet-bg;
         // background-clip: padding-box;
         border: 0;
+        transition: $transition_duration-sideSheet_inner $transition_function-sideSheet_inner
+            $transition_delay-sideSheet_inner;
     }
 
     &-header {
@@ -115,8 +118,12 @@ $module: #{$prefix}-sidesheet;
         width: 100%;
         height: 100%;
         background-color: $color-sideSheet_mask-bg;
+        opacity: 1;
+        transition: opacity $transition_duration-sideSheet_mask-bg $transition_function-sideSheet_mask-bg
+            $transition_delay-sideSheet_mask-bg;
 
         &-hidden {
+            opacity: 0;
             display: none;
         }
     }
@@ -168,4 +175,4 @@ $module: #{$prefix}-sidesheet;
     display: none;
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/skeleton/skeleton.scss

@@ -1,8 +1,7 @@
-@import "./variables.scss";
+@import './variables.scss';
 $module: #{$prefix}-skeleton;
 
 .#{$module} {
-
     &-avatar,
     &-image,
     &-title,
@@ -101,7 +100,6 @@ $module: #{$prefix}-skeleton;
     }
 
     @keyframes skeleton-loading {
-
         0% {
             background-position: 100% 50%;
         }
@@ -112,4 +110,4 @@ $module: #{$prefix}-skeleton;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/slider/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/slider/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-slider_handle-bg: var(--semi-transition_duration-faster);//滑动条圆形按钮-背景色-动画持续时间
+$transition_function-slider_handle-bg: var(--semi-transition_function-easeIn);//滑动条圆形按钮-背景色-过渡曲线
+$transition_delay-slider_handle-bg: var(--semi-transition_delay-fastest);//滑动条圆形按钮-背景色-延迟时间
+
+//transform token
+
+$transform_scale-slider_handle: var(--semi-transform_scale-small);//滑动条圆形按钮-放大

package/lib/cjs/slider/slider.css

@@ -44,7 +44,8 @@
   border: none;
   border-radius: 50%;
   cursor: pointer;
-  transition: #fff 0.3s;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-small));
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);

package/lib/cjs/slider/slider.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
-@import './variables.scss';
+@import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-slider;
 
@@ -54,8 +55,8 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff 0.3s;
-
+        transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
+        transform: scale($transform_scale-slider_handle);
         &:focus-visible {
             outline: $width-slider_handle-focus solid $color-slider_handle-focus;
         }

package/lib/cjs/spin/spin.scss

@@ -1,7 +1,7 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "../keyframes/rotate.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import '../keyframes/rotate.scss';
 
 $module: #{$prefix}-spin;
 
@@ -18,7 +18,7 @@ $module: #{$prefix}-spin;
         top: $spacing-spin_wrapper-top;
         color: $color-spin-bg;
 
-        &>svg {
+        & > svg {
             animation: $motion-spin_wrapper_svg-animationDuration linear infinite #{$prefix}-animation-rotate;
             @include size($width-spin_middle);
         }
@@ -40,7 +40,7 @@ $module: #{$prefix}-spin;
         // 添加一个遮罩解决嵌套 Spin 穿透问题
 
         &::after {
-            content: "";
+            content: '';
             position: absolute;
             top: 0;
             left: 0;
@@ -60,13 +60,12 @@ $module: #{$prefix}-spin;
     }
 
     &-hidden {
-
         &::after {
             content: none;
         }
 
         // 考虑到嵌套，.spin-chidren 节点的 opacity 由直接父级节点的 .spin-hidden 决定
-        &>.#{$module}-children {
+        & > .#{$module}-children {
             opacity: 1;
             user-select: auto;
         }
@@ -76,7 +75,7 @@ $module: #{$prefix}-spin;
 .#{$module}-small {
     @include size($width-spin_small);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_small);
     }
 }
@@ -84,7 +83,7 @@ $module: #{$prefix}-spin;
 .#{$module}-middle {
     @include size($width-spin_middle);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_middle);
     }
 }
@@ -92,7 +91,7 @@ $module: #{$prefix}-spin;
 .#{$module}-large {
     @include size($width-spin_large);
 
-    &>.#{$module}-wrapper svg {
+    & > .#{$module}-wrapper svg {
         @include size($width-spin_large);
     }
 }
@@ -101,4 +100,4 @@ $module: #{$prefix}-spin;
     overflow: hidden;
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/cjs/steps/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/steps/animation.scss

@@ -0,0 +1,17 @@
+$transition_duration-steps_item_title-text: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_title-text: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_title-text: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+$transition_duration-steps_item_title-icon: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_title-icon: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_title-icon: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+$transition_duration-steps_item_backgroundColor: var(--semi-transition_duration-faster);//步骤条标题文字-背景色-动画持续时间
+$transition_function-steps_item_backgroundColor: var(--semi-transition_function-easeIn);//步骤条标题文字-背景色-过渡曲线
+$transition_delay-steps_item_backgroundColor: var(--semi-transition_delay-fastest);//步骤条标题文字-背景色-延迟时间
+
+
+
+//transform token
+
+$transform_scale-step-item: var(--semi-transform_scale-small);//步骤条item-放大

package/lib/cjs/steps/bacisSteps.scss

@@ -69,9 +69,11 @@ $basicType: #{$module}-basic;
 
             .#{$item}-title {
                 max-width: $width-steps_basic_item_title-maxWidth;
-
+                
                 .#{$item}-title-text {
                     @include text-overflow-hidden;
+                    transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                       
                 }
             }
 
@@ -166,6 +168,10 @@ $basicType: #{$module}-basic;
         overflow: hidden;
         flex: 1;
         cursor: pointer;
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text, //step文字color的transition变化
+        background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
+        transform:scale($transform_scale-step-item);
 
         &:hover {
 
@@ -187,7 +193,7 @@ $basicType: #{$module}-basic;
             justify-content: center;
             align-items: center;
             margin-right: $spacing-steps_basic_item_left-marginRight;
-
+            
 
             .#{$item}-icon {
                 display: flex;
@@ -206,7 +212,7 @@ $basicType: #{$module}-basic;
                 background: $color-steps_item_left_number_icon-bg;
                 border-radius: $radius-steps_basic_item_left_number_icon;
                 color: $color-steps_item_left_number_icon-icon;
-
+                transition: color $transition_duration-steps_item_title-icon $transition_function-steps_item_title-icon $transition_delay-steps_item_title-icon; //step icon color的transition变化
             }
         }
 
@@ -221,6 +227,8 @@ $basicType: #{$module}-basic;
             vertical-align: top;
             padding-right: $spacing-steps_basic_item_title-paddingRight;
             padding-bottom: $spacing-steps_basic_item_title-paddingBottom;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; //step文字color的transition变化
+       
         }
 
         // 完成状态的样式

package/lib/cjs/steps/fillSteps.scss

@@ -39,7 +39,10 @@ $module: #{$prefix}-steps;
         border: $width-steps_item-border solid $color-steps-border-default;
         border-radius: $radius-steps_item;
         padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
-
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
+        transform:scale($transform_scale-step-item);
+        transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
         .#{$module}-item-title {
             position: relative;
             // display: inline-block;
@@ -48,6 +51,8 @@ $module: #{$prefix}-steps;
             width: $width-steps_item_title;
             @include text-overflow-hidden;
             color: $color-steps_main-text-default;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                     
         }
 
         .#{$module}-item-description {

package/lib/cjs/steps/navSteps.scss

@@ -8,7 +8,7 @@ $basicType: #{$module}-nav;
 
     .#{$item} {
         @include box-sizing;
-
+        
         &:last-child {
             flex: none;
 

package/lib/cjs/steps/steps.css

@@ -17,6 +17,9 @@
   border: 1px solid transparent;
   border-radius: var(--semi-border-radius-medium);
   padding: 12px 16px;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-small));
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps .semi-steps-item .semi-steps-item-title {
   position: relative;
@@ -29,6 +32,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--semi-color-text-0);
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps .semi-steps-item .semi-steps-item-description {
   font-size: 14px;
@@ -194,6 +198,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps-basic.semi-steps-vertical {
   display: flex;
@@ -256,6 +261,8 @@
   overflow: hidden;
   flex: 1;
   cursor: pointer;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-small));
 }
 .semi-steps-basic .semi-steps-item:hover .semi-steps-item-title {
   color: var(--semi-color-focus-border);
@@ -291,6 +298,7 @@
   background: var(--semi-color-primary);
   border-radius: var(--semi-border-radius-circle);
   color: var(--semi-color-white);
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps-basic .semi-steps-item .semi-steps-item-title {
   position: relative;
@@ -304,6 +312,7 @@
   vertical-align: top;
   padding-right: 16px;
   padding-bottom: 4px;
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon {
   color: var(--semi-color-primary);

package/lib/cjs/steps/steps.scss

@@ -2,6 +2,7 @@
 // @import '../theme/mixin.scss';
 // @import '../theme/font.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 @import "./fillSteps.scss";
 @import "./bacisSteps.scss";
 @import "./navSteps.scss";

package/lib/cjs/switch/animation.css

@@ -0,0 +1,3 @@
+/* shadow */
+/* sizing */
+/* spacing */

package/lib/cjs/switch/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-switch-bg: 200ms;//开关-背景色-动画持续时间
+$transition_function-switch-bg: var(--semi-transition_function-easeIn);//开关-背景色-过渡曲线
+$transition_delay-switch-bg: var(--semi-transition_delay-fastest);//开关-背景色-延迟时间
+

package/lib/cjs/switch/foundation.js

@@ -59,9 +59,9 @@ class SwitchFoundation extends _foundation.default {
 
   handleChange(checked, e) {
     const propChecked = this.getProps().checked;
-    const isControledComponent = typeof propChecked !== 'undefined';
+    const isControlledComponent = typeof propChecked !== 'undefined';
 
-    if (isControledComponent) {
+    if (isControlledComponent) {
       this._adapter.notifyChange(checked, e);
     } else {
       this._adapter.setNativeControlChecked(checked);

package/lib/cjs/switch/switch.css

@@ -9,7 +9,7 @@
   position: relative;
   cursor: pointer;
   background-color: var(--semi-color-fill-0);
-  transition: background-color 200ms ease-in-out;
+  transition: background-color 200ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   width: 40px;
   height: 24px;
 }

package/lib/cjs/switch/switch.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-switch;
 
@@ -11,7 +12,9 @@ $module: #{$prefix}-switch;
     cursor: pointer;
     background-color: $color-switch_default-bg-default;
     // box-shadow: inset 0 0 0 0 $color-switch_default-bg-success;
-    transition: background-color $motion-switch-transitionDuration ease-in-out;
+    //transition: background-color $motion-switch-transitionDuration ease-in-out;
+    transition: background-color $transition_duration-switch-bg $transition_function-switch-bg $transition_delay_switch-bg;
+
     width: $width-switch;
     height: $height-switch;