Merge pull request #1051 from fumidesign/css-animation

Css animation

package.json

@@ -113,7 +113,6 @@
     "@babel/types": "^7.15.4",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^7.6.0",
-    "@cypress/code-coverage": "^3.9.12",
     "@octokit/rest": "^18.12.0",
     "@shopify/jest-dom-mocks": "^2.11.7",
     "@storybook/addon-a11y": "^6.4.10",
@@ -151,8 +150,6 @@
     "chromatic": "^6.0.6",
     "crypto": "^1.0.1",
     "css-loader": "^3.6.0",
-    "cypress": "9.5.2",
-    "cypress-plugin-tab": "^1.0.5",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",

packages/semi-foundation/anchor/anchor.scss

@@ -72,7 +72,8 @@ $module: #{$prefix}-anchor;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-
+            transition: color $transition_duration-anchor_title-text $transition_function-anchor_title-text $transition_delay-anchor_title-text;//锚点选项文字的动效
+            transform: scale($transform_scale-anchor_title-text);
             &:hover {
                 color: $color-anchor_title-text-hover;
             }

packages/semi-foundation/anchor/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-anchor_title-text: var(--semi-transition_dulation-faster);//锚点标题文字-文字-动画持续时间
+$transition_function-anchor_title-text: var(--semi-transition_function-easeIn);//锚点标题文字-文字-过渡曲线
+$transition_delay-anchor_title-text: var(--semi-transition_delay-fastest);//锚点标题文字-文字-延迟时间
+
+//transform token
+$transform_scale-anchor_title-text: var(--semi-transform_scale-none);//锚点-放大

packages/semi-foundation/breadcrumb/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-breadcrumb_link-text: var(--semi-transition_dulation-faster);//面包屑文字-文字-动画持续时间
+$transition_function-breadcrumb_link-text: var(--semi-transition_function-easeIn);//面包屑文字-文字-过渡曲线
+$transition_delay-breadcrumb_link-text: var(--semi-transition_delay-fastest);//面包屑文字-文字-延迟时间
+
+//transform token
+$transform_scale-breadcrumb_link-text: var(--semi-transform_scale-none);//面包屑文字-放大

packages/semi-foundation/breadcrumb/breadcrumb.scss

@@ -62,7 +62,7 @@ $module: #{$prefix}-breadcrumb;
         &:hover,
         &:active {
             border: none;
-            margin-bottom: 0px;
+            margin-bottom: 0;
             color: $color-breadcrumb_active-text-active;
             cursor: default;
         }
@@ -88,6 +88,8 @@ $module: #{$prefix}-breadcrumb;
         align-items: center;
         column-gap: 4px;
         text-decoration: inherit;
+        transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
+        transform: scale($transform_scale-breadcrumb_link-text);
 
         &:hover {
             color: $color-breadcrumb_default-text-hover;

packages/semi-foundation/button/animation.scss

@@ -1,24 +1,67 @@
-$transition_duration-button_primary-bg: var(--semi-transition_dulation-faster);
-$transition_function_button_primary-bg: var(--semi-transition_function-easeIn);
-$transition_delay_button_primary-bg: var(--semi-transition_delay-fastest);
+$transition_duration-button_primary-bg: var(--semi-transition_dulation-faster);//主要按钮-背景色-动画持续时间
+$transition_function-button_primary-bg: var(--semi-transition_function-easeIn);//主要按钮-背景色-过渡曲线
+$transition_delay-button_primary-bg: var(--semi-transition_delay-fastest);//主要按钮-背景色-延迟时间
 
-$transition_duration-button_secondary-bg: var(--semi-transition_dulation-faster);
-$transition_function_button_secondary-bg: var(--semi-transition_function-easeIn);
-$transition_delay_button_secondary-bg: var(--semi-transition_delay-fastest);
 
-$transition_duration-button_tertiary-bg: var(--semi-transition_dulation-faster);
-$transition_function_button_tertiary-bg: var(--semi-transition_function-easeIn);
-$transition_delay_button_tertiary-bg: var(--semi-transition_delay-fastest);
+$transition_duration-button_secondary-bg: var(--semi-transition_dulation-faster);//次要按钮-背景色-动画持续时间
+$transition_function-button_secondary-bg: var(--semi-transition_function-easeIn);//次要按钮-背景色-过渡曲线
+$transition_delay-button_secondary-bg: var(--semi-transition_delay-fastest);//次要按钮-背景色-延迟时间
 
-$transition_duration-button_light-bg: var(--semi-transition_dulation-faster);
-$transition_function_button_light-bg: var(--semi-transition_function-easeIn);
-$transition_delay_button_light-bg: var(--semi-transition_delay-fastest);
 
-$transition_duration-button_warning-bg: var(--semi-transition_dulation-faster);
-$transition_function_button_warning-bg: var(--semi-transition_function-easeIn);
-$transition_delay_button_warning-bg: var(--semi-transition_delay-fastest);
+$transition_duration-button_tertiary-bg: var(--semi-transition_dulation-faster);//三级按钮-背景色-动画持续时间
+$transition_function-button_tertiary-bg: var(--semi-transition_function-easeIn);//三级按钮-背景色-过渡曲线
+$transition_delay-button_tertiary-bg: var(--semi-transition_delay-fastest);//三级按钮-背景色-延迟时间
 
-$transition_duration-button_danger-bg: var(--semi-transition_dulation-faster);
-$transition_function_button_danger-bg: var(--semi-transition_function-easeIn);
-$transition_delay_button_danger-bg: var(--semi-transition_delay-fastest);
 
+$transition_duration-button_light-bg: var(--semi-transition_dulation-faster);//浅色按钮-背景色-动画持续时间
+$transition_function-button_light-bg: var(--semi-transition_function-easeIn);//浅色按钮-背景色-过渡曲线
+$transition_delay-button_light-bg: var(--semi-transition_delay-fastest);//浅色按钮-背景色-延迟时间
+
+
+$transition_duration-button_warning-bg: var(--semi-transition_dulation-faster);//警告按钮-背景色-动画持续时间
+$transition_function-button_warning-bg: var(--semi-transition_function-easeIn);//警告按钮-背景色-过渡曲线
+$transition_delay-button_warning-bg: var(--semi-transition_delay-fastest);//警告按钮-背景色-延迟时间
+
+
+$transition_duration-button_danger-bg: var(--semi-transition_dulation-faster);//危险按钮-背景色-动画持续时间
+$transition_function-button_danger-bg: var(--semi-transition_function-easeIn);//危险按钮-背景色-过渡曲线
+$transition_delay-button_danger-bg: var(--semi-transition_delay-fastest);//危险按钮-背景色-延迟时间
+
+
+$transition_duration-button_borderless-bg: var(--semi-transition_dulation-faster);//无边框按钮-背景色-动画持续时间
+$transition_function-button_borderless-bg: var(--semi-transition_function-easeIn);//无边框按钮-背景色-过渡曲线
+$transition_delay-button_borderless-bg: var(--semi-transition_delay-fastest);//无边框按钮-背景色-延迟时间
+
+$transition_duration-button_primary-border: var(--semi-transition_dulation-faster);//主要按钮-边框-动画持续时间
+$transition_function-button_primary-border: var(--semi-transition_function-easeIn);//主要按钮-边框-过渡曲线
+$transition_delay-button_primary-border: var(--semi-transition_delay-fastest);//主要按钮-边框-延迟时间
+
+$transition_duration-button_secondary-border: var(--semi-transition_dulation-faster);//次要按钮-边框-动画持续时间
+$transition_function-button_secondary-border: var(--semi-transition_function-easeIn);//次要按钮-边框-过渡曲线
+$transition_delay-button_secondary-border: var(--semi-transition_delay-fastest);//次要按钮-边框-延迟时间
+
+$transition_duration-button_tertiary-border: var(--semi-transition_dulation-faster);//三级按钮-边框-动画持续时间
+$transition_function-button_tertiary-border: var(--semi-transition_function-easeIn);//三级按钮-边框-过渡曲线
+$transition_delay-button_tertiary-border: var(--semi-transition_delay-fastest);//三级按钮-边框-延迟时间
+
+$transition_duration-button_light-border: var(--semi-transition_dulation-faster);//浅色按钮-边框-动画持续时间
+$transition_function-button_light-border: var(--semi-transition_function-easeIn);//浅色按钮-边框-过渡曲线
+$transition_delay-button_light-border: var(--semi-transition_delay-fastest);//浅色按钮-边框-延迟时间
+
+$transition_duration-button_warning-border: var(--semi-transition_dulation-faster);//警告按钮-边框-动画持续时间
+$transition_function-button_warning-border: var(--semi-transition_function-easeIn);//警告按钮-边框-过渡曲线
+$transition_delay-button_warning-border: var(--semi-transition_delay-fastest);//警告按钮-边框-延迟时间
+
+$transition_duration-button_danger-border: var(--semi-transition_dulation-faster);//危险按钮-边框-动画持续时间
+$transition_function-button_danger-border: var(--semi-transition_function-easeIn);//危险按钮-边框-过渡曲线
+$transition_delay-button_danger-border: var(--semi-transition_delay-fastest);//危险按钮-边框-延迟时间
+
+//transform token
+
+$transform_scale-button_primary: var(--semi-transform_scale-none);//主要按钮-放大
+$transform_scale-button_secondary: var(--semi-transform_scale-none);//次要按钮-放大
+$transform_scale-button_tertiary: var(--semi-transform_scale-none);//三级按钮-放大
+$transform_scale-button_light: var(--semi-transform_scale-none);//浅色按钮-放大
+$transform_scale-button_warning: var(--semi-transform_scale-none);//警告按钮-放大
+$transform_scale-button_danger: var(--semi-transform_scale-none);//危险按钮-放大
+$transform_scale-button_borderless: var(--semi-transform_scale-none);//无边框按钮-放大

packages/semi-foundation/button/button.scss

@@ -40,7 +40,10 @@ $module: #{$prefix}-button;
     &-danger {
         background-color: $color-button_danger-bg-default;
         color: $color-button_danger-text-default;
-      transition: background-color $transition_duration-button_danger-bg $transition_function_button_danger-bg $transition_delay_button_danger-bg;
+      transition: background-color $transition_duration-button_danger-bg $transition_function-button_danger-bg $transition_delay-button_danger-bg,
+      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+      transform: scale(var($transform-scale-button_danger));
+
 
       &:hover {
             background-color: $color-button_danger-bg-hover;
@@ -59,7 +62,9 @@ $module: #{$prefix}-button;
     &-warning {
         background-color: $color-button_warning-bg-default;
         color: $color-button_warning-text-default;
-      transition: background-color $transition_duration-button_warning-bg $transition_function_button_warning-bg $transition_delay_button_warning-bg;
+      transition: background-color $transition_duration-button_warning-bg $transition_function-button_warning-bg $transition_delay-button_warning-bg,
+      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+      transform:scale(var($transform_scale-button_warning));
 
       &:hover {
             background-color: $color-button_warning-bg-hover;
@@ -78,7 +83,9 @@ $module: #{$prefix}-button;
     &-tertiary {
         background-color: $color-button_tertiary-bg-default;
         color: $color-button_tertiary-text-default;
-      transition: background-color $transition_duration-button_tertiary-bg $transition_function_button_tertiary-bg $transition_delay_button_tertiary-bg;
+      transition: background-color $transition_duration-button_tertiary-bg $transition_function-button_tertiary-bg $transition_delay-button_tertiary-bg,
+      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+      transform:scale(var($transform_scale_button_tertiary));
 
       &:hover {
             background-color: $color-button_tertiary-bg-hover;
@@ -94,7 +101,10 @@ $module: #{$prefix}-button;
     &-primary {
         background-color: $color-button_primary-bg-default;
         color: $color-button_primary-text-default;
-        transition: background-color $transition_duration-button_primary-bg $transition_function_button_primary-bg $transition_delay_button_primary-bg;
+        transition: background-color $transition_duration-button_primary-bg $transition_function-button_primary-bg $transition_delay-button_primary-bg,
+        border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
+      transform:scale(var($transform_scale-button_primary));
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
@@ -111,7 +121,9 @@ $module: #{$prefix}-button;
         background-color: $color-button_secondary-bg-default;
         outline-color: $color-button_secondary-border-default;
         color: $color-button_secondary-text-default;
-      transition: background-color $transition_duration-button_secondary-bg $transition_function_button_secondary-bg $transition_delay_button_secondary-bg;
+      transition: background-color $transition_duration-button_secondary-bg $transition_function-button_secondary-bg $transition_delay-button_secondary-bg,
+      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+      transform:scale(var($transform_scale-button_secondary));
 
       &:hover {
             background-color: $color-button_secondary-bg-hover;
@@ -142,6 +154,9 @@ $module: #{$prefix}-button;
     &-borderless {
         background-color: transparent;
         border: $width-button_borderless-border $color-button_borderless-border-default solid;
+      transition:background-color $transition_duration-button_borderless-bg $transition_function-button_borderless-bg $transition_delay-button_borderless-bg;
+      transform:scale(var($transform_scale-button_borderless));
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
             border: $width-button_borderless-border $color-button_borderless-border-hover solid;
@@ -155,7 +170,9 @@ $module: #{$prefix}-button;
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;
-      transition: background-color $transition_duration-button_light-bg $transition_function_button_light-bg $transition_delay_button_light-bg;
+      transition: background-color $transition_duration-button_light-bg $transition_function-button_light-bg $transition_delay-button_light-bg，
+      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+      transform:scale(var($transform_scale-button_light));
 
       &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;

packages/semi-foundation/cascader/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-cascader_option-bg: var(--semi-transition_dulation-faster);//级联选项-背景色-动画持续时间
+$transition_function-cascader_option-bg: var(--semi-transition_function-easeIn);//级联选项-背景色-过渡曲线
+$transition_delay-cascader_option-bg: var(--semi-transition_delay-fastest);//级联选项-背景色-延迟时间
+

packages/semi-foundation/cascader/cascader.scss

@@ -380,6 +380,7 @@ $module: #{$prefix}-cascader;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
+        transition: background-color $transition_duration-cascader_option-bg $transition_function-cascader_option-bg $transition_delay-cascader_option-bg;
 
         @include font-size-regular;
         min-width: min-content;

packages/semi-foundation/checkbox/animation.scss

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

packages/semi-foundation/checkbox/checkbox.scss

@@ -14,6 +14,9 @@ $module: #{$prefix}-checkbox;
     flex-wrap: wrap;
     @include font-size-regular;
     cursor: pointer;
+    transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+    border $transition_duration-checkbox-border $transition_function_checkbox-border $transition_delay-checkbox-border;
+    transform: scale($transform_scale-checkbox);
 
     input[type="checkbox"] {
         position: absolute;
@@ -85,6 +88,8 @@ $module: #{$prefix}-checkbox;
         height: $height-checkbox_inner;
         user-select: none; // prevent text under it will be selected when double click
         cursor: pointer;
+        transition: background-color $transition_duration-checkbox-bg $transition_function-checkbox-bg $transition_delay-checkbox-bg,
+        border $transition_duration-checkbox-border $transition_function-checkbox-border $transition_delay-checkbox-border;
 
         &-display {
             @include box-sizing;
@@ -178,6 +183,7 @@ $module: #{$prefix}-checkbox;
         background: transparent;
         border: $width-checkbox_cardType_checked-border solid transparent;
 
+
         .#{$module}-inner {
             position: relative;
             &-display {

packages/semi-foundation/datePicker/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-datepicker_date-bg: var(--semi-transition_dulation-faster);//时间选择器-格子背景色-动画持续时间
+$transition_function-datepicker_date-bg: var(--semi-transition_function-easeIn);//时间选择器-格子背景色-过渡曲线
+$transition_delay-datepicker_date-bg: var(--semi-transition_delay-fastest);//时间选择器-格子背景色-延迟时间
+

packages/semi-foundation/input/animation.scss

@@ -0,0 +1,14 @@
+$transition_duration-input-bg: var(--semi-transition_dulation-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_dulation-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_dulation-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);//输入框-变大

packages/semi-foundation/input/input.scss

@@ -40,6 +40,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;

packages/semi-foundation/input/textarea.scss

@@ -12,6 +12,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;

packages/semi-foundation/inputNumber/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-inputNumber-bg: var(--semi-transition_dulation-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_dulation-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);//数字输入框-变大

packages/semi-foundation/inputNumber/inputNumber.scss

@@ -7,6 +7,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;

packages/semi-foundation/navigation/animation.scss

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

packages/semi-foundation/navigation/navigation.scss

@@ -82,6 +82,8 @@ $module: #{$prefix}-navigation;
         color: $color-navigation_itemL1-text-default;
         width: 100%;
 
+        transition: background-color $transition_function-navigation_itemL1-bg $transition_function-navigation_itemL1-bg $transition_delay-navigation_itemL1-bg;//nav item的bg transition
+
         &-text {
             overflow: hidden;
             white-space: nowrap;

packages/semi-foundation/pagination/animation.scss

@@ -0,0 +1,11 @@
+$transition_duration-pagination_item-bg: var(--semi-transition_dulation-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_dulation-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-放大

packages/semi-foundation/pagination/pagination.scss

@@ -36,6 +36,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;

packages/semi-foundation/radio/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-radio-bg: var(--semi-transition_dulation-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_dulation-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);//单选框-变大

packages/semi-foundation/radio/radio.scss

@@ -9,6 +9,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 +106,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;
@@ -262,6 +266,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;

packages/semi-foundation/rating/animation.scss

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

packages/semi-foundation/rating/rating.scss

@@ -37,6 +37,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;

packages/semi-foundation/select/animation.scss

@@ -0,0 +1,15 @@
+$transition_duration-select-bg: var(--semi-transition_dulation-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_dulation-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_dulation-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);//选择框-箭头-旋转

packages/semi-foundation/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;

packages/semi-foundation/select/select.scss

@@ -21,7 +21,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;
@@ -256,6 +258,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空白

packages/semi-foundation/slider/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-slider_handle-bg: var(--semi-transition_dulation-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);//滑动条圆形按钮-放大

packages/semi-foundation/slider/slider.scss

@@ -54,7 +54,8 @@ $module: #{$prefix}-slider;
         border: none;
         border-radius: 50%;
         cursor: pointer;
-        transition: #fff .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);
     }
 
     &-handle:hover {

packages/semi-foundation/steps/animation.scss

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

packages/semi-foundation/steps/bacisSteps.scss

@@ -166,6 +166,8 @@ $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变化
+        transform:scale($transform_scale-step-item);
 
         &:hover {
 

packages/semi-foundation/steps/fillSteps.scss

@@ -39,6 +39,8 @@ $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);
 
         .#{$module}-item-title {
             position: relative;

packages/semi-foundation/switch/animation.scss

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

packages/semi-foundation/switch/switch.scss

@@ -11,7 +11,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;
 

packages/semi-foundation/tabs/animation.scss

@@ -0,0 +1,23 @@
+$transition_duration-tabs_tab_line-border: var(--semi-transition_dulation-faster);//线条式标签页标示线-边框-动画持续时间
+$transition_function-tabs_tab_line-border: var(--semi-transition_function-easeIn);//线条式标签页标示线-边框-过渡曲线
+$transition_delay-tabs_tab_line-border: var(--semi-transition_delay-fastest);//线条式标签页标示线-边框-延迟时间
+
+$transition_duration-tabs_tab_line-text: var(--semi-transition_dulation-faster);//线条式标签页-文字-动画持续时间
+$transition_function-tabs_tab_line-text: var(--semi-transition_function-easeIn);//线条式标签页-文字-过渡曲线
+$transition_delay-tabs_tab_line-text: var(--semi-transition_delay-fastest);//线条式标签页-文字-延迟时间
+
+
+$transition_duration-tabs_tab_button-bg: var(--semi-transition_dulation-faster);//按钮式标签页-背景色-动画持续时间
+$transition_function-tabs_tab_button-bg: var(--semi-transition_function-easeIn);//按钮式标签页-背景色-过渡曲线
+$transition_delay-tabs_tab_button-bg: var(--semi-transition_delay-fastest);//按钮式标签页-背景色-延迟时间
+
+
+$transition_duration-tabs_tab_card-bg: var(--semi-transition_dulation-faster);//卡片式标签页文字-背景色-动画持续时间
+$transition_function-tabs_tab_card-bg: var(--semi-transition_function-easeIn);//卡片式标签页文字-背景色-过渡曲线
+$transition_delay-tabs_tab_card-bg: var(--semi-transition_delay-fastest);//卡片式标签页文字-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tabs_tab_line-item: var(--semi-transform_scale-none);//线条式标签页item 放大
+$transform_scale-tabs_tab_button-item: var(--semi-transform_scale-none);//按钮式标签页item 放大
+$transform_scale-tabs_tab_card-item: var(--semi-transform_scale-none);//线条式标签页item 放大

packages/semi-foundation/tabs/tabs.scss

@@ -156,6 +156,9 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
+            transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的border-color以及color的transition
+            transform:scale($transform_scale-tabs_tab_line-item);
             
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
@@ -338,6 +341,8 @@ $module: #{$prefix}-tabs;
         
         .#{$module}-tab {
             padding: $spacing-tabs_bar_card_tab-paddingY $spacing-tabs_bar_card_tab-paddingX;
+            transition: background-color $transition_duration-tabs_tab_card-bg $transition_function-tabs_tab_card-bg $transition_delay-tabs_tab_card-bg; //卡片式tabs的bg的transition
+            transform:scale($transform_scale-tabs_tab_card-item);
             
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -380,6 +385,8 @@ $module: #{$prefix}-tabs;
             border-radius: $radius-tabs_tab_button;
             color: $color-tabs_tab_button-text-default;
             border: none;
+            transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg;//按钮tabs的背景色的transition
+            transform:scale($transform_scale-tabs_tab_button-item);
             
             &:hover {
                 border: none;

packages/semi-foundation/tagInput/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-tagInput-bg: var(--semi-transition_dulation-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_dulation-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

packages/semi-foundation/tagInput/tagInput.scss

@@ -10,7 +10,10 @@ $module: #{$prefix}-tagInput;
     font-weight: $font-weight-regular;
     width: 100%;
     box-sizing: border-box;
-    
+    transition: background-color $transition_duration-tagInput-bg $transition_function-tagInput-bg $transition_delay-tagInput-bg,
+    border $transition_duration-tagInput-border $transition_function-tagInput-border $transition_delay-tagInput-border;
+
+
     &-hover {
         background-color: $color-tagInput_default-bg-hover;
         border: $width-tagInput-border-hover $color-tagInput-border-hover solid;

packages/semi-foundation/timePicker/utils/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-timePicker-bg: var(--semi-transition_dulation-faster);//标签输入框-背景色-动画持续时间
+$transition_function-tagInput-bg: var(--semi-transition_function-easeIn);//标签输入框-背景色-过渡曲线
+$transition_delay-tagInput-bg: var(--semi-transition_delay-fastest);//标签输入框-背景色-延迟时间
+
+$transition_duration-tagInput-border: var(--semi-transition_dulation-faster);//标签输入框-边框-动画持续时间
+$transition_function-tagInput-border: var(--semi-transition_function-easeIn);//标签输入框-边框-过渡曲线
+$transition_delay-tagInput-border: var(--semi-transition_delay-fastest);//标签输入框-边框-延迟时间

packages/semi-foundation/transfer/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration_transfer_item-bg: var(--semi-transition_dulation-faster);//穿梭框条目-背景色-动画持续时间
+$transition_function_transfer_item-bg: var(--semi-transition_function-easeIn);//穿梭框条目-背景色-过渡曲线
+$transition_delay_transfer_item-bg: var(--semi-transition_delay-fastest);//穿梭框条目-背景色-延迟时间
+

packages/semi-foundation/transfer/transfer.scss

@@ -75,6 +75,9 @@ $module: #{$prefix}-transfer;
         flex-wrap: nowrap;
         color: $color-transfer_item-text;
         cursor: pointer;
+        transition: background-color $transition_duration_transfer_item-bg $transition_function-transfer_item-bg $transition_delay-transfer_item-bg;
+
+
 
         &:hover {
             background-color: $color-transfer_item-bg-hover;

packages/semi-foundation/tree/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration-tree_option-bg: var(--semi-transition_dulation-faster);//树选项-背景色-动画持续时间
+$transition_function-tree_option-bg: var(--semi-transition_function-easeIn);//树选项-背景色-过渡曲线
+$transition_delay-tree_option-bg: var(--semi-transition_delay-fastest);//树选项-背景色-延迟时间
+
+//transform token
+
+$transform_scale-tree-option: var(--semi-transform_scale-none);//树选项-放大

packages/semi-foundation/tree/tree.scss

@@ -53,6 +53,8 @@ $module: #{$prefix}-tree;
         display: flex;
         align-items: center;
         cursor: pointer;
+        transition: background-color $transition_duration-tree_option-bg $transition_function-tree_option-bg $transition_delay-tree_option-bg;
+        transform:scale($transform_scale-tree-option);
 
         @include font-size-regular;
         word-break: break-word;

packages/semi-theme-default/scss/animation.scss

@@ -21,4 +21,20 @@ body{
   --semi-transition_delay-faster:0ms;
   --semi-transition_delay-fastest:0ms;
 
+  --semi-transform_scale-none:scale(1,1);
+  --semi-transform_scale-small:scale(1.04,1.04);
+  --semi-transform_scale-medium:scale(1.08,1.08);
+  --semi-transform_scale-large:scale(1.12,1.12);
+
+  --semi-transform-rotate-none:rotate(0deg);
+  --semi-transform_rotate-clockwise90deg:rotate(90deg);
+  --semi-transform_rotate-clockwise180deg:rotate(180deg);
+  --semi-transform_rotate-clockwise270deg:rotate(270deg);
+  --semi-transform_rotate-clockwise360deg:rotate(360deg);
+  --semi-transform_rotate-anticlockwise90deg:rotate(-90deg);
+  --semi-transform_rotate-anticlockwise180deg:rotate(-180deg);
+  --semi-transform_rotate-anticlockwise270deg:rotate(-270deg);
+  --semi-transform_rotate-anticlockwise360deg:rotate(-360deg);
+
+
 }