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

package/lib/es/form/form.scss

@@ -109,14 +109,15 @@ $rating: #{$prefix}-rating;
                     font-weight: $font-form_requiredMark-fontWeight;
                 }
             }
-            // .#{$field}-label-extra {
-            // }
-
             &-disabled {
                 color: $color-form_requiredMark_disabled-text-default;
             }
         }
 
+        &-optional-text {
+            color: $color-form_label_optional-text-default;
+        }
+
         &-left {
             text-align: left;
         }

package/lib/es/form/variables.scss

@@ -32,6 +32,7 @@ $font-form_label-fontWeight: $font-weight-bold; // 表单标题字重
 $font-form_requiredMark-fontWeight: $font-weight-bold; // 表单必填标识字重
 
 $color-form_label-text-default: var(--semi-color-text-0); // 表单标题文字颜色
+$color-form_label_optional-text-default: var(--semi-color-tertiary); // 表单可选标记文字颜色
 $color-form_label_extra-text-default: var(--semi-color-tertiary); // 表单额外信息辅助文字颜色
 
 $color-form_label_disabled-text-default: var(--semi-color-disabled-text); // 禁用表单项标题文字颜色

package/lib/es/input/animation.css

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

package/lib/es/input/animation.scss

@@ -0,0 +1,14 @@
+$transition_duration-input-bg: var(--semi-transition_duration-faster);//输入框-背景色-动画持续时间
+$transition_function-input-bg: var(--semi-transition_function-easeIn);//输入框-背景色-过渡曲线
+$transition_delay-input-bg: var(--semi-transition_delay-fastest);//输入框-背景色-延迟时间
+
+$transition_duration-input-border: var(--semi-transition_duration-faster);//输入框-边框-动画持续时间
+$transition_function-input-border: var(--semi-transition_function-easeIn);//输入框-边框-过渡曲线
+$transition_delay-input-border: var(--semi-transition_delay-fastest);//输入框-边框-延迟时间
+
+$transition_duration-input-text: var(--semi-transition_duration-faster);//输入框-文字或图标-动画持续时间
+$transition_function-input-text: var(--semi-transition_function-easeIn);//输入框-文字或图标-过渡曲线
+$transition_delay-input-text: var(--semi-transition_delay-fastest);//输入框-文字或图标-延迟时间
+
+// transform token
+$transform_scale-input: var(--semi-transform_scale-none);//输入框-变大

package/lib/es/input/input.css

@@ -17,6 +17,11 @@
     transform: scale(1);
   }
 }
+.semi-input {
+  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-input-wrapper {
   display: inline-block;
   position: relative;
@@ -33,6 +38,8 @@
   cursor: text;
   box-sizing: border-box;
   color: var(--semi-color-text-0);
+  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-input-wrapper-default {
   height: 32px;

package/lib/es/input/input.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -23,6 +24,12 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}{
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+    transform: scale($transform_scale-input);
+}
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -40,6 +47,11 @@ $module: #{$prefix}-input;
     box-sizing: border-box;
     color: $color-input_default-text-default;
 
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
+
+    transform: scale($transform_scale-input);
+
     &-default {
         height: $height-input_wrapper_default;
         @include font-size-regular;

package/lib/es/input/textarea.css

@@ -10,6 +10,7 @@
   border-radius: var(--semi-border-radius-small);
   vertical-align: bottom;
   background-color: var(--semi-color-fill-0);
+  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);
 }
 .semi-input-textarea-wrapper:hover {
   background-color: var(--semi-color-fill-1);

package/lib/es/input/textarea.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-input;
 
@@ -12,6 +13,8 @@ $module: #{$prefix}-input;
     border-radius: $radius-input_wrapper;
     vertical-align: bottom;
     background-color: $color-input_default-bg-default;
+    transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
+    border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
     &:hover {
         background-color: $color-input_default-bg-hover;

package/lib/es/inputNumber/animation.css

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

package/lib/es/inputNumber/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-inputNumber-bg: var(--semi-transition_duration-faster);//数字输入框-背景色-动画持续时间
+$transition_function-inputNumber-bg: var(--semi-transition_function-easeIn);//数字输入框-背景色-过渡曲线
+$transition_delay-inputNumber-bg: var(--semi-transition_delay-fastest);//数字输入框-背景色-延迟时间
+
+$transition_duration-inputNumber-border: var(--semi-transition_duration-faster);//数字输入框-边框-动画持续时间
+$transition_function-inputNumber-border: var(--semi-transition_function-easeIn);//数字输入框-边框-过渡曲线
+$transition_delay-inputNumber-border: var(--semi-transition_delay-fastest);//数字输入框-边框-延迟时间
+
+// transform token
+$transform_scale-inputNumber: var(--semi-transform_scale-none);//数字输入框-变大

package/lib/es/inputNumber/inputNumber.css

@@ -5,6 +5,8 @@
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
+  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-input-number-suffix-btns {
   display: inline-flex;

package/lib/es/inputNumber/inputNumber.scss

@@ -1,3 +1,4 @@
+@import "./animation.scss";
 @import '../input/variables.scss';
 @import './variables.scss';
 
@@ -7,6 +8,9 @@ $module: #{$prefix}-input-number;
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
+    transition: background-color $transition_duration-inputNumber-bg $transition_function-inputNumber-bg $transition_delay-inputNumber-bg,
+    border $transition_duration-inputNumber-border $transition_function-inputNumber-border $transition_delay-inputNumber-border;
+    transform: scale($transform_scale-inputNumber);
 
     &-suffix-btns {
         display: inline-flex;

package/lib/es/modal/modal.css

@@ -38,6 +38,10 @@
   -webkit-overflow-scrolling: touch;
   outline: 0;
 }
+.semi-modal-wrap-center {
+  display: flex;
+  align-items: center;
+}
 .semi-modal-title {
   display: inline-flex;
   align-items: flex-start;

package/lib/es/modal/modal.scss

@@ -42,6 +42,10 @@ $module: #{$prefix}-modal;
         z-index: $z-modal;
         -webkit-overflow-scrolling: touch;
         outline: 0;
+        &-center{
+            display: flex;
+            align-items: center;
+        }
     }
     
     &-title {

package/lib/es/navigation/animation.css

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

package/lib/es/navigation/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-navigation_itemL1-bg: var(--semi-transition_duration-faster);//导航一级菜单-背景色-动画持续时间
+$transition_function-navigation_itemL1-bg: var(--semi-transition_function-easeIn);//导航一级菜单-背景色-过渡曲线
+$transition_delay-navigation_itemL1-bg: var(--semi-transition_delay-fastest);//导航一级菜单-背景色-延迟时间
+

package/lib/es/navigation/navigation.css

@@ -63,6 +63,7 @@
   font-weight: 400;
   color: var(--semi-color-text-0);
   width: 100%;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text {
   overflow: hidden;

package/lib/es/navigation/navigation.scss

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
 @import "./mixin.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-navigation;
 
@@ -82,6 +83,8 @@ $module: #{$prefix}-navigation;
         color: $color-navigation_itemL1-text-default;
         width: 100%;
 
+        transition: background-color $transition_duration-navigation_itemL1-bg $transition_function-navigation_itemL1-bg $transition_delay-navigation_itemL1-bg;//nav item的bg transition
+
         &-text {
             overflow: hidden;
             white-space: nowrap;

package/lib/es/notification/notification.scss

@@ -1,5 +1,5 @@
 //@import '../theme/variables.scss';
-@import "./variables.scss";
+@import './variables.scss';
 
 $module: #{$prefix}-notification;
 
@@ -15,41 +15,40 @@ $module: #{$prefix}-notification;
     z-index: $z-notification;
     pointer-events: none;
 
-    &[placement="topRight"] {
+    &[placement='topRight'] {
         right: 0;
         top: 0;
     }
 
-    &[placement="top"] {
+    &[placement='top'] {
         top: 0;
         left: 50%;
         transform: translateX(-50%);
     }
 
-    &[placement="topLeft"] {
+    &[placement='topLeft'] {
         left: 0;
         top: 0;
     }
 
-    &[placement="bottom"] {
+    &[placement='bottom'] {
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
     }
 
-    &[placement="bottomRight"] {
+    &[placement='bottomRight'] {
         bottom: 0;
         right: 0;
     }
 
-    &[placement="bottomLeft"] {
+    &[placement='bottomLeft'] {
         bottom: 0;
         left: 0;
     }
 }
 
 .#{$module} {
-
     &-notice {
         @include shadow-elevated;
         border-radius: $radius-notification_notice;
@@ -169,4 +168,4 @@ $module: #{$prefix}-notification;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

package/lib/es/pagination/animation.css

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

package/lib/es/pagination/animation.scss

@@ -0,0 +1,11 @@
+$transition_duration-pagination_item-bg: var(--semi-transition_duration-faster);//翻页器页码-背景色-动画持续时间
+$transition_function-pagination_item-bg: var(--semi-transition_function-easeIn);//翻页器页码-背景色-过渡曲线
+$transition_delay-pagination_item-bg: var(--semi-transition_delay-fastest);//翻页器页码-背景色-延迟时间
+
+$transition_duration-pagination_item-text: var(--semi-transition_duration-faster);//翻页器页码文本-背景色-动画持续时间
+$transition_function-pagination_item-text: var(--semi-transition_function-easeIn);//翻页器页码文本-背景色-过渡曲线
+$transition_delay-pagination_item-text: var(--semi-transition_delay-fastest);//翻页器页码文本-背景色-延迟时间
+
+//transform token
+
+$transform_scale-pagination_item: var(--semi-transform_scale-none);//翻页器item-放大

package/lib/es/pagination/pagination.css

@@ -37,6 +37,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-page-item:hover {
   border-color: transparent;

package/lib/es/pagination/pagination.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-page;
 
@@ -36,6 +37,9 @@ $module: #{$prefix}-page;
         display: flex;
         align-items: center;
         justify-content: center;
+        transition: background-color $transition_duration-pagination_item-bg $transition_function-pagination_item-bg $transition_delay-pagination_item-bg,
+        color $transition_duration-pagination_item-text $transition_function-pagination_item-text $transition_delay-pagination_item-text;
+        transform:scale($transform_scale-pagination_item);
 
         &:hover {
             border-color: $color-pagination_item-border-hover;

package/lib/es/radio/animation.css

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

package/lib/es/radio/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-radio-bg: var(--semi-transition_duration-faster);//单选框-背景色-动画持续时间
+$transition_function-radio-bg: var(--semi-transition_function-easeIn);//单选框-背景色-过渡曲线
+$transition_delay-radio-bg: var(--semi-transition_delay-fastest);//单选框-背景色-延迟时间
+
+$transition_duration-radio-border: var(--semi-transition_duration-faster);//单选框-边框-动画持续时间
+$transition_function-radio-border: var(--semi-transition_function-easeIn);//单选框-边框-过渡曲线
+$transition_delay-radio-border: var(--semi-transition_delay-fastest);//单选框-边框-延迟时间
+
+// transform token
+$transform_scale-radio: var(--semi-transform_scale-none);//单选框-变大

package/lib/es/radio/radio.css

@@ -9,6 +9,7 @@
   position: relative;
   display: inline-flex;
   flex-wrap: wrap;
+  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);
   min-height: 20px;
   min-width: 16px;
   cursor: pointer;
@@ -77,6 +78,7 @@
   padding: 12px 16px;
   background: transparent;
   border: 1px solid transparent;
+  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);
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
   position: relative;
@@ -168,6 +170,7 @@
   border: solid 1px var(--semi-color-text-3);
   border-radius: 16px;
   background: transparent;
+  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);
 }
 .semi-radio-inner-display .semi-icon {
   position: absolute;
@@ -197,6 +200,7 @@
   color: var(--semi-color-text-1);
   font-size: 12px;
   padding: 4px 16px;
+  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);
 }
 .semi-radio-addon-buttonRadio-hover {
   font-weight: 600;

package/lib/es/radio/radio.scss

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-radio;
 $inner-width: $width-icon-medium;
@@ -9,6 +10,8 @@ $inner-width: $width-icon-medium;
     position: relative;
     display: inline-flex;
     flex-wrap: wrap;
+    transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+    border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
     &.#{$module}-vertical {
         display: block;
@@ -104,6 +107,8 @@ $inner-width: $width-icon-medium;
         padding: $spacing-radio_cardRadioGroup-paddingY $spacing-radio_cardRadioGroup-paddingX;
         background: transparent;
         border: $width-radio_cardRadioGroup_checked-border solid transparent;
+        transition: background-color $transition_duration_radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+        border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
             position: relative;
@@ -224,7 +229,9 @@ $inner-width: $width-icon-medium;
             border: solid $width-radio_innder-border $color-radio_default-border-default;
             border-radius: $width-radio_inner;
             background: $color-radio_default-bg-default;
-
+            transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+            border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
+        
             .#{$prefix}-icon {
                 position: absolute;
                 width: 100%;
@@ -262,6 +269,8 @@ $inner-width: $width-icon-medium;
             color: $color-radio_buttonRadio-text-default;
             font-size: $font-radio_buttonRadio_middle-default-size;
             padding: $spacing-radio_addon_buttonRadio_middle-paddingY $spacing-radio_addon_buttonRadio_middle-paddingX;
+            transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
+            border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
             &-hover {
                 font-weight: $font-radio_buttonRadio-hover-fontWeight;

package/lib/es/rating/animation.css

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

package/lib/es/rating/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-rating-color: var(--semi-transition_duration-faster);//评分-背景色-动画持续时间
+$transition_function-rating-color: var(--semi-transition_function-easeIn);//评分-背景色-过渡曲线
+$transition_delay-rating-color: var(--semi-transition_delay-fastest);//评分-背景色-延迟时间
+
+// transform token
+$transform_scale-rating: var(--semi-transform_scale-none);//评分-变大

package/lib/es/rating/rating.css

@@ -30,6 +30,7 @@
   color: inherit;
   cursor: pointer;
   transition: all 0.5s;
+  transform: scale(var(--semi-transform_scale-none));
 }
 .semi-rating-star:not(:last-child) {
   margin-right: 6px;
@@ -58,6 +59,7 @@
   height: 100%;
 }
 .semi-rating-star-first, .semi-rating-star-second {
+  transition: color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   color: var(--semi-color-fill-0);
   user-select: none;
 }

package/lib/es/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/es/scrollList/animation.css

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

package/lib/es/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/es/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/es/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/es/select/animation.css

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

package/lib/es/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/es/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/es/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;