feat: 20+ component add animation css token (#924)

* feat: add animation.scss support to all compiler && add transition and token

Co-authored-by: fumidesign <[email protected]>
Co-authored-by: NorthSea <[email protected]>
Co-authored-by: 代强 <[email protected]>
Co-authored-by: pointhalo <[email protected]>

.vscode/settings.json

@@ -20,7 +20,7 @@
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "typescript.updateImportsOnFileMove.enabled": "always",
-    "files.autoSave": "off",
+    "files.autoSave": "onFocusChange",
     "[json]": {
         "editor.defaultFormatter": "vscode.json-language-features"
     },

content/input/button/index-en-US.md

@@ -28,8 +28,6 @@ Buttons support the following types:
 -   Warning button ("warning")
 -   Danger button ("danger")
 
-> Primary and Secondary button have the same colors in Semi's default theme, but you can implement different Primary and Secondary colors by customizing the theme.
-
 ```jsx live=true dir="column"
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';

content/input/button/index.md

@@ -27,8 +27,6 @@ import { Button, SplitButtonGroup } from '@douyinfe/semi-ui';
 -   警告按钮（"warning"）
 -   危险按钮（"danger"）
 
-> Semi 默认主题的 Primary 与 Secondary 颜色相同，但你可以通过自定义主题来实现不同的 Primary 与 Secondary 颜色。
-
 ```jsx live=true dir="column"
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';

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",
@@ -201,7 +198,10 @@
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.2",
-    "webpackbar": "^5.0.0-3"
+    "webpackbar": "^5.0.0-3",
+    "cypress": "9.5.2",
+    "cypress-plugin-tab": "^1.0.5",
+    "@cypress/code-coverage": "^3.9.12"
   },
   "husky": {
     "hooks": {

packages/semi-foundation/anchor/anchor.scss

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-anchor;
 
@@ -80,7 +81,8 @@ $module: #{$prefix}-anchor;
             text-overflow: ellipsis;
             white-space: nowrap;
             border-radius: $width-anchor-outline_border_radius;
-
+            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_duration-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/autoComplete/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-autoComplete_option-bg: var(--semi-transition_duration-faster);//选择器-选项-动画持续时间
+$transition_function-autoComplete_option-bg: var(--semi-transition_function-easeIn);//选择器-选项-过渡曲线
+$transition_delay-autoComplete_option-bg: var(--semi-transition_delay-fastest);//选择器-选项-延迟时间

packages/semi-foundation/autoComplete/autoComplete.scss

@@ -1,5 +1,6 @@
 @import "./variables.scss";
-@import "../select/option.scss";
+@import "./animation.scss";
+@import "./option.scss";
 
 $module: #{$prefix}-autocomplete;
 

packages/semi-foundation/autoComplete/constants.ts

@@ -3,6 +3,9 @@ import { BASE_CLASS_PREFIX, VALIDATE_STATUS } from '../base/constants';
 
 const cssClasses = {
     PREFIX: `${BASE_CLASS_PREFIX}-autocomplete`,
+    PREFIX_OPTION: `${BASE_CLASS_PREFIX}-autoComplete-option`,
+    PREFIX_GROUP: `${BASE_CLASS_PREFIX}-autoComplete-group`,
+    
 };
 
 const strings = {

packages/semi-foundation/autoComplete/option.scss

@@ -0,0 +1,93 @@
+$module: #{$prefix}-autoComplete;
+$filterable: #{$module}-filterable;
+
+.#{$module}-option {
+    @include font-size-regular;
+    word-break: break-all;
+    padding-left: $spacing-autoComplete_option-paddingLeft;
+    padding-right: $spacing-autoComplete_option-paddingRight;
+    padding-top: $spacing-autoComplete_option-paddingTop;
+    padding-bottom: $spacing-autoComplete_option-paddingBottom;
+    color: $color-autoComplete_option_main-text;
+    border-radius: $radius-autoComplete_option;
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: background-color $transition_duration-autoComplete_option-bg $transition_function-autoComplete_option-bg $transition_delay-autoComplete_option-bg;
+
+    &-icon {
+        width: $width-autoComplete_option_tick;
+        color: $color-autoComplete_option-icon-default;
+        visibility: hidden;
+        margin-right: $spacing-autoComplete_option_tick-marginRight;
+        display: flex;
+        justify-content: center;
+        align-content: center;
+    }
+
+    &-text {
+        display: flex;
+        flex-wrap: wrap;
+        white-space: pre;
+    }
+
+    &-keyword {
+        color: $color-autoComplete_option_keyword-text;
+        background-color: inherit;
+        font-weight: $font-autoComplete_keyword-fontWeight;
+    }
+    // &:hover {
+    //     background-color: $color-autoComplete_option-bg-hover;
+    // }
+
+    &:active {
+        background-color: $color-autoComplete_option-bg-active;
+    }
+
+    &-empty {
+        cursor: not-allowed;
+        color: $color-autoComplete_option_disabled-text;
+        justify-content: center;
+
+        &:hover {
+            background-color: inherit;
+        }
+
+        &:active {
+            background-color: inherit;
+        }
+    }
+
+    &-disabled {
+        color: $color-autoComplete_option_disabled-text;
+        cursor: not-allowed;
+
+        &:hover {
+            background-color: $color-autoComplete_option-bg-hover;
+        }
+    }
+
+    &-selected {
+        font-weight: $font-weight-bold;
+
+        .#{$module}-option-icon {
+            visibility: visible;
+            color: $color-autoComplete_option-icon-active;
+        }
+    }
+
+    &-focused {
+        background-color: $color-autoComplete_option-bg-hover;
+    }
+
+    &:first-of-type {
+        margin-top: $spacing-autoComplete_option_first-marginTop;
+    }
+
+    &:last-of-type {
+        margin-bottom: $spacing-autoComplete_option_last-marginBottom;
+    }
+}

packages/semi-foundation/autoComplete/optionFoundation.ts

@@ -0,0 +1,41 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+
+
+export interface BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | unknown;
+    children?: unknown;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: Record<string, any>;
+}
+export interface OptionDefaultAdapter extends Partial<DefaultAdapter> {
+    notifyClick(option: BasicOptionProps): void;
+}
+
+
+export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapter> {
+
+    constructor(adapter: OptionDefaultAdapter) {
+        super({ ...adapter });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    init() {}
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    destroy() {}
+
+    onOptionClick(option: BasicOptionProps) {
+        const isDisabled = this._isDisabled();
+        if (!isDisabled) {
+            this._adapter.notifyClick(option);
+        }
+    }
+
+    _isDisabled() {
+        return this.getProp('disabled');
+    }
+}

packages/semi-foundation/autoComplete/variables.scss

@@ -1,3 +1,50 @@
 // Spacing
 $spacing-autoComplete_loading_wrapper-paddingTop: $spacing-tight; //加载搜索结果时的顶部内边距
 $spacing-autoComplete_loading_wrapper-paddingBottom: $spacing-tight; //加载搜索结果时的底部内边距
+
+
+
+
+
+$color-autoComplete_option_keyword-text: var(--semi-color-primary); // 自动完成菜单选项匹配搜索结果文本颜色
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+$width-autoComplete_option_tick: $width-icon-small; // 自动完成菜单项选中对勾图标大小
+$spacing-autoComplete_option_tick-marginRight: $spacing-tight; // 自动完成菜单选中对勾右侧外边距
+
+$spacing-autoComplete_option-paddingLeft: $spacing-base-tight; // 自动完成菜单项左侧内边距
+$spacing-autoComplete_option-paddingRight: $spacing-base-tight; // 自动完成菜单项右侧内边距
+$spacing-autoComplete_option-paddingTop: $spacing-tight; // 自动完成菜单项顶部内边距
+$spacing-autoComplete_option-paddingBottom: $spacing-tight; // 自动完成菜单项底部内边距
+$spacing-autoComplete_option_first-marginTop: $spacing-extra-tight; // 自动完成第一个菜单项顶部外边距
+$spacing-autoComplete_option_last-marginBottom: $spacing-extra-tight; // 自动完成最后一个菜单项顶部外边距
+
+$spacing-autoComplete_option_list-paddingTop: 0px; // 自动完成内容区顶部内边距
+$spacing-autoComplete_option_list-paddingRight: 0px; // 自动完成内容区右侧内边距
+$spacing-autoComplete_option_list-paddingBottom: 0px; // 自动完成内容区底部内边距
+$spacing-autoComplete_option_list-paddingLeft: 0px; // 自动完成内容区左侧内边距
+
+$radius-autoComplete_option: 0px; // 自动完成待选项圆角
+
+$color-autoComplete_option_main-text: var(--semi-color-text-0); // 自动完成菜单选项文本颜色
+
+$color-autoComplete_option-bg-default: transparent; // 自动完成菜单选项背景颜色 - 默认态
+$color-autoComplete_option-icon-default: transparent; // 自动完成菜单选项图标颜色 - 默认态
+$color-autoComplete_option-bg-hover: var(--semi-color-fill-0); // 自动完成菜单选项背景颜色 - 悬停态
+$color-autoComplete_option-bg-active: var(--semi-color-fill-1); // 自动完成菜单选项背景颜色 - 按下态
+$color-autoComplete_option_disabled-text: var(--semi-color-disabled-text); // 禁用自动完成菜单选项文字颜色
+$color-autoComplete_option_disabled-bg: transparent; // 禁用自动完成菜单选项背景颜色
+$color-autoComplete_option-icon-active: var(--semi-color-text-2); // 禁用自动完成菜单选项图标颜色 - 选中态
+$color-autoComplete_option-border-default: var(--semi-color-border); // 分组自动完成菜单项描边颜色
+
+
+$font-autoComplete-fontWeight: $font-weight-regular; // 自动完成文本字重
+$font-autoComplete_inset_label-fontWeight: 600; // 自动完成内嵌标签文本字重
+$font-autoComplete_keyword-fontWeight: 600; // 自动完成搜索结果命关键词中文本字重

packages/semi-foundation/avatar/avatar.scss

@@ -1,10 +1,9 @@
-@import "./variables.scss";
-@import "./mixin.scss";
+@import './variables.scss';
+@import './mixin.scss';
 
 $module: #{$prefix}-avatar;
-$colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink",
-    "purple", "red", "teal", "violet", "yellow";
-
+$colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink',
+    'purple', 'red', 'teal', 'violet', 'yellow';
 
 .#{$module} {
     position: relative;
@@ -211,4 +210,4 @@ $colors: "amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "ligh
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/breadcrumb/animation.scss

@@ -0,0 +1,6 @@
+$transition_duration-breadcrumb_link-text: var(--semi-transition_duration-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

@@ -2,6 +2,7 @@
 // @import '../theme/mixin.scss';
 // @import '../theme/_font.scss';
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-breadcrumb;
 
@@ -24,7 +25,7 @@ $module: #{$prefix}-breadcrumb;
     &-item-wrap {
         display: inline-flex;
         align-items: center;
-        margin: $spacing-breadcrumb_item_wrap-marginY 0;
+        margin: $spacing-breadcrumb_item_wrap-marginY 0px;
         margin-right: $spacing-breadcrumb_item_wrap-marginRight;
     }
 
@@ -88,6 +89,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

@@ -0,0 +1,67 @@
+$transition_duration-button_primary-bg: var(--semi-transition_duration-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_duration-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_duration-faster);//三级按钮-背景色-动画持续时间
+$transition_function-button_tertiary-bg: var(--semi-transition_function-easeIn);//三级按钮-背景色-过渡曲线
+$transition_delay-button_tertiary-bg: var(--semi-transition_delay-fastest);//三级按钮-背景色-延迟时间
+
+
+$transition_duration-button_light-bg: var(--semi-transition_duration-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_duration-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_duration-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_duration-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_duration-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_duration-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_duration-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_duration-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_duration-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_duration-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

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import './animation.scss';
 @import './splitButtonGroup.scss';
 
 $module: #{$prefix}-button;
@@ -39,6 +40,11 @@ $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,
+      border $transition_duration-button_danger-border $transition_function-button_danger-border $transition_delay-button_danger-border;
+      transform: scale($transform-scale-button_danger);
+
+
         &:hover {
             background-color: $color-button_danger-bg-hover;
         }
@@ -56,6 +62,10 @@ $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,
+      border $transition_duration-button_warning-border $transition_function-button_warning-border $transition_delay-button_warning-border;
+      transform:scale($transform_scale-button_warning);
+
         &:hover {
             background-color: $color-button_warning-bg-hover;
         }
@@ -73,6 +83,10 @@ $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,
+      border $transition_duration-button_tertiary-border $transition_function-button_tertiary-border $transition_delay-button_tertiary-border;
+      transform:scale($transform_scale_button_tertiary);
+
         &:hover {
             background-color: $color-button_tertiary-bg-hover;
         }
@@ -87,6 +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,
+        border $transition_duration-button_primary-border $transition_function-button_primary-border $transition_delay-button_primary-border;;
+      transform:scale($transform_scale-button_primary);
+
         &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
@@ -103,6 +121,10 @@ $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,
+      border $transition_duration-button_secondary-border $transition_function-button_secondary-border $transition_delay-button_secondary-border;
+      transform:scale($transform_scale-button_secondary);
+
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
@@ -132,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($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;
@@ -145,6 +170,10 @@ $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,
+      border $transition_duration-button_light-border $transition_function-button_light-border $transition_delay-button_light-border;
+      transform:scale($transform_scale-button_light);
+
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
             border: $width-button_light-border $color-button_light-border-hover solid;

packages/semi-foundation/carousel/animation.scss

@@ -0,0 +1,7 @@
+$transition_duration_carousel_indicator-bg: var(--semi-transition_delay-fastest); // 指示器-背景色-动画持续时间
+$transition_function_carousel_indicator-bg: var(--semi-transition_function-easeOut); // 指示器-背景色-过渡曲线
+$transition_delay_carousel_indicator-bg: var(--semi-transition_delay-none); // 指示器-背景色-延迟时间
+
+$transition_duration_carousel_arrow-bg: var(--semi-transition_delay-fastest); // 箭头-背景色-动画持续时间
+$transition_funciton_carousel_arrow-bg: var(--semi-transition_function-easeOut); // 箭头-背景色-过渡曲线
+$transition_delay_carousel_arrow-bg: var(--semi-transition_delay-none); // 箭头-背景色-延迟时间

packages/semi-foundation/carousel/carousel.scss

@@ -1,4 +1,5 @@
-@import "./variables.scss";
+@import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-carousel;
 
@@ -23,22 +24,20 @@ $module: #{$prefix}-carousel;
             &-current {
                 z-index: 1;
             }
-
         }
 
         &-fade {
-            
             > * {
                 opacity: 0;
             }
-    
+
             .#{$module}-content-item-current {
                 opacity: 1;
             }
         }
 
         &-slide {
-            &>*:not(.#{$module}-content-item-current) {
+            & > *:not(.#{$module}-content-item-current) {
                 visibility: hidden;
             }
 
@@ -46,21 +45,20 @@ $module: #{$prefix}-carousel;
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
             }
-        
+
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
             }
-          
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
-                animation: #{$module}-content-item-keyframe-slide-out-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-out-reverse;
             }
-    
+
             .#{$module}-content-item-slide-in {
-                animation: #{$module}-content-item-keyframe-slide-in-reverse ;
+                animation: #{$module}-content-item-keyframe-slide-in-reverse;
             }
         }
     }
@@ -89,7 +87,6 @@ $module: #{$prefix}-carousel;
             bottom: $spacing-carousel_indicator-padding;
         }
 
-    
         &-dot {
             .#{$module}-indicator-item {
                 border-radius: $radius-carousel_indicator_dot;
@@ -102,7 +99,6 @@ $module: #{$prefix}-carousel;
                 &-small {
                     width: $width-carousel_indicator_dot_small;
                     height: $width-carousel_indicator_dot_small;
-                   
                 }
 
                 &-medium {
@@ -112,6 +108,8 @@ $module: #{$prefix}-carousel;
 
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
@@ -127,8 +125,9 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_light-bg-active;
@@ -145,6 +144,8 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
+                    transition: background-color $transition_duration-carousel_indicator-bg
+                        $transition_function-carousel_indicator-bg $transition_delay-carousel_indicator-bg;
 
                     &.#{$module}-indicator-item-active {
                         background-color: $color-carousel_indicator_theme_dark-bg-active;
@@ -159,14 +160,13 @@ $module: #{$prefix}-carousel;
                     }
                 }
             }
-
         }
 
         &-line {
             width: $width-carousel_indicator_line;
 
             .#{$module}-indicator-item {
-                flex: 1; 
+                flex: 1;
                 cursor: pointer;
 
                 &:not(:last-child) {
@@ -175,7 +175,6 @@ $module: #{$prefix}-carousel;
 
                 &-small {
                     height: $height-carousel_indicator_line_small;
-                   
                 }
 
                 &-medium {
@@ -199,7 +198,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-light {
-
                     background-color: $color-carousel_indicator_theme_light-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -216,7 +214,6 @@ $module: #{$prefix}-carousel;
                 }
 
                 &-dark {
-
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
 
                     &.#{$module}-indicator-item-active {
@@ -231,15 +228,13 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
 
         &-columnar {
             .#{$module}-indicator-item {
                 cursor: pointer;
-                
+
                 &:not(:last-child) {
                     margin-right: $spacing-carousel_indicator_columnar-marginX;
                 }
@@ -262,11 +257,9 @@ $module: #{$prefix}-carousel;
                     }
                 }
 
-
                 &-primary {
                     background-color: $color-carousel_indicator_theme_primary-bg-default;
 
-
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_primary-bg-active;
                     }
@@ -298,7 +291,7 @@ $module: #{$prefix}-carousel;
 
                 &-dark {
                     background-color: $color-carousel_indicator_theme_dark-bg-default;
-                    
+
                     &.#{$module}-indicator-item-active {
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
@@ -311,9 +304,7 @@ $module: #{$prefix}-carousel;
                         background: $color-carousel_indicator_theme_dark-bg-active;
                     }
                 }
-        
             }
-
         }
     }
 
@@ -340,15 +331,18 @@ $module: #{$prefix}-carousel;
 
         &-light {
             color: $color-carousel_arrow_theme_light-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_light-bg-hover;
             }
         }
 
-
         &-primary {
             color: $color-carousel_arrow_theme_primary-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_primary-bg-hover;
@@ -357,20 +351,20 @@ $module: #{$prefix}-carousel;
 
         &-dark {
             color: $color-carousel_arrow_theme_dark-bg-default;
+            transition: color $transition_duration-carousel_arrow-bg $transition_funciton_carousel_arrow-bg
+                $transition_delay-carousel_arrow-bg;
 
             &:hover {
                 color: $color-carousel_arrow_theme_dark-bg-hover;
             }
         }
-
     }
 
     &-arrow-hover div {
         z-index: 2;
         opacity: 0;
-        transition: all .3s;
     }
-    
+
     &:hover {
         .#{$module}-arrow-hover div {
             opacity: 1;
@@ -379,47 +373,43 @@ $module: #{$prefix}-carousel;
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in {
-
     from {
         transform: translateX(100%);
     }
-    
+
     to {
         transform: translateX(0);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-out {
-
     from {
         transform: translateX(0);
     }
-    
+
     to {
         transform: translateX(-100%);
     }
 }
 
 @keyframes #{$module}-content-item-keyframe-slide-in-reverse {
-
     from {
         transform: translateX(-100%);
     }
-  
+
     to {
         transform: translateX(0);
     }
 }
-  
-@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
 
+@keyframes #{$module}-content-item-keyframe-slide-out-reverse {
     from {
         transform: translateX(0);
     }
-  
+
     to {
         transform: translateX(100%);
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/cascader/animation.scss

@@ -0,0 +1,4 @@
+$transition_duration-cascader_option-bg: var(--semi-transition_duration-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

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-cascader;
 
@@ -380,6 +381,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_duration-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_duration-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

@@ -1,6 +1,7 @@
 //@import '../theme/variables.scss';
 // @import '../theme/mixin.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 @import "./mixin.scss";
 
 $module: #{$prefix}-checkbox;
@@ -14,6 +15,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;
@@ -93,6 +97,8 @@ $module: #{$prefix}-checkbox;
             height: $width-checkbox_inner;
             margin: 0;
             background: $color-checkbox_default-bg-default;
+            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;
 
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-default;
             border-radius: $radius-checkbox_inner;
@@ -112,7 +118,7 @@ $module: #{$prefix}-checkbox;
             border-radius: $radius-checkbox_inner;
         }
 
-        & > .#{$module}-addon {
+        &>.#{$module}-addon {
             color: $color-checkbox_label-text-default;
         }
     }
@@ -178,11 +184,14 @@ $module: #{$prefix}-checkbox;
         background: transparent;
         border: $width-checkbox_cardType_checked-border solid transparent;
 
+
         .#{$module}-inner {
             position: relative;
+
             &-display {
                 background: $color-checkbox_cardType_inner-bg-default;
             }
+
             margin-right: $spacing-checkbox_cardType_inner-marginRight;
             flex-shrink: 0;
         }
@@ -232,6 +241,7 @@ $module: #{$prefix}-checkbox;
             &:hover {
                 background: $color-checkbox_cardType_checked-bg;
                 border-color: $color-checkbox_cardType_checked_border-hover;
+
                 .#{$module}-inner-checked .#{$module}-inner-display {
                     box-shadow: none;
                 }
@@ -247,12 +257,13 @@ $module: #{$prefix}-checkbox;
             &:active {
                 background: transparent;
             }
+
             &:hover {
                 background: transparent;
             }
         }
 
-        &_checked_disabled.#{$module}-cardType  {
+        &_checked_disabled.#{$module}-cardType {
             background: $color-checkbox_cardType_checked_disabled-bg;
             border: $width-checkbox_cardType_checked_disabled-border solid $color-checkbox_cardType_checked_disabled_border-default;
 
@@ -355,7 +366,7 @@ $module: #{$prefix}-checkbox;
 
     &-focus {
         outline: $width-checkbox-outline solid $color-checkbox_primary-outline-focus;
-        
+
         &-border {
             box-shadow: inset 0 0 0 $size-checkbox_inner-shadow $color-checkbox_default-border-hover;
         }
@@ -366,6 +377,7 @@ $module: #{$prefix}-checkbox;
     @include font-size-regular;
     // make sure group height 32px
     line-height: $font-size-regular;
+
     .#{$module} {
         &.#{$module}-vertical {
             margin-bottom: $spacing-checkbox_group_vertical-marginBottom;
@@ -376,6 +388,7 @@ $module: #{$prefix}-checkbox;
         .#{$module} {
             margin-right: $spacing-checkbox_group_horizontal-marginRight;
             display: inline-flex;
+
             &:last-of-type {
                 margin-right: 0;
             }
@@ -385,10 +398,12 @@ $module: #{$prefix}-checkbox;
     &-vertical {
         .#{$module} {
             margin-bottom: $spacing-checkbox_group_vertical_item-marginBottom;
+
             &:last-of-type {
                 margin-bottom: 0;
             }
         }
+
         &-cardType {
             .#{$module} {
                 margin-bottom: $spacing-checkbox_card_group_vertical-marginBottom;
@@ -397,4 +412,4 @@ $module: #{$prefix}-checkbox;
     }
 }
 
-@import "./rtl.scss";
+@import "./rtl.scss";

packages/semi-foundation/datePicker/animation.scss

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

packages/semi-foundation/dropdown/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-dropdown_item-bg: var(--semi-transition_duration-fastest); // 下拉菜单项-背景颜色-动画持续时间
+$transition_function-dropdown_item-bg: var(--semi-transition_function-easeOut); // 下拉菜单项-背景颜色-过渡曲线
+$transition_delay-dropdown_item-bg: 0ms; // 下拉菜单项-背景颜色-延迟时间

packages/semi-foundation/dropdown/dropdown.scss

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import './variables.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-dropdown;
 
@@ -43,6 +44,9 @@ $module: #{$prefix}-dropdown;
         max-width: $width-dropdown;
         display: flex;
         align-items: center;
+        transition: background-color $transition_duration-dropdown_item-bg $transition_function-dropdown_item-bg
+            $transition_delay-dropdown_item-bg;
+
         &:not(.#{$module}-item-active):hover {
             background-color: $color-dropdown_item-bg-hover;
             cursor: pointer;
@@ -107,4 +111,4 @@ $module: #{$prefix}-dropdown;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

packages/semi-foundation/gulpfile.js

@@ -39,7 +39,9 @@ const excludeScss = [
     '!**/steps/fillSteps.scss',
     '!**/steps/navSteps.scss',
     '!**/table/operationPanel.scss',
-    '!**/tooltip/arrow.scss'
+    '!**/tooltip/arrow.scss',
+    '!**/autoComplete/option.scss',
+    '!**/select/option.scss',
 ];
 gulp.task('compileScss', function compileScss() {
     return gulp.src(['**/*.scss', '!node_modules/**/*.*', '!**/rtl.scss', '!**/variables.scss', ...excludeScss])

packages/semi-foundation/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);//输入框-变大

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

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

packages/semi-foundation/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);//数字输入框-变大

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

packages/semi-foundation/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);//导航一级菜单-背景色-延迟时间
+

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

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

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

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

packages/semi-foundation/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);//单选框-变大

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

packages/semi-foundation/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);//评分-变大

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

packages/semi-foundation/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; // 滚动列表选中选项-背景颜色-延迟时间

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

packages/semi-foundation/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);//选择框-箭头-旋转

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

@@ -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空白

packages/semi-foundation/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; // 选择器文本字重

packages/semi-foundation/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; // 侧边栏-延迟时间

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

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

packages/semi-foundation/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);//滑动条圆形按钮-放大

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

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

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

packages/semi-foundation/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变化
+       
         }
 
         // 完成状态的样式

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

packages/semi-foundation/steps/navSteps.scss

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

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

packages/semi-foundation/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);//开关-背景色-延迟时间
+

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

packages/semi-foundation/table/animation.scss

@@ -0,0 +1,3 @@
+$transition_duration-table_body-bg: var(--semi-transition_duration-faster); // 表格-背景颜色-动画持续时间
+$transition_function-table_body-bg: var(--semi-transition_function-easeOut); // 表格-背景颜色-过渡曲线
+$transition_delay-table_body-bg: 0ms; // 表格-背景颜色-延迟时间

packages/semi-foundation/table/table.scss

@@ -1,6 +1,7 @@
-@import "./variables.scss";
-@import "./mixin.scss";
-@import "./operationPanel.scss";
+@import './variables.scss';
+@import './mixin.scss';
+@import './operationPanel.scss';
+@import './animation.scss';
 
 $module: #{$prefix}-table;
 
@@ -23,7 +24,7 @@ $module: #{$prefix}-table;
         color: $color-table-text-default;
         width: 100%;
 
-        &[data-column-fixed=true] {
+        &[data-column-fixed='true'] {
             z-index: 1;
         }
     }
@@ -76,7 +77,6 @@ $module: #{$prefix}-table;
             display: table-column;
         }
         .#{$module}-column {
-
             &-expand,
             &-selection {
                 width: $width-table_column_selection;
@@ -102,7 +102,6 @@ $module: #{$prefix}-table;
                 position: relative;
 
                 &.#{$module}-cell-fixed {
-
                     &-left,
                     &-right {
                         z-index: $z-table_fixed_column;
@@ -111,7 +110,7 @@ $module: #{$prefix}-table;
 
                         &::before {
                             background-color: $color-table_th-bg-default;
-                            content: "";
+                            content: '';
                             position: absolute;
                             left: 0;
                             top: 0;
@@ -141,7 +140,7 @@ $module: #{$prefix}-table;
 
                         // scroll-bar 列无需有box-shadow
 
-                        &[x-type="column-scrollbar"] {
+                        &[x-type='column-scrollbar'] {
                             box-shadow: none;
                             border-left: transparent;
                         }
@@ -152,7 +151,7 @@ $module: #{$prefix}-table;
                     text-align: center;
                 }
 
-                &[colspan]:not([colspan="1"]) {
+                &[colspan]:not([colspan='1']) {
                     text-align: center;
                 }
 
@@ -198,14 +197,13 @@ $module: #{$prefix}-table;
                     background-color: $color-table_body-bg-hover;
 
                     &.#{$module}-cell-fixed {
-
                         &-left,
                         &-right {
                             background-color: $color-table_body-bg-default;
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
-                                content: "";
+                                content: '';
                                 position: absolute;
                                 left: 0;
                                 top: 0;
@@ -236,7 +234,6 @@ $module: #{$prefix}-table;
                 }
             }
             &.#{$module}-row {
-
                 &-expand {
                     & > .#{$module}-row-cell {
                         background-color: $color-table_row_expanded-bg-default;
@@ -245,10 +242,9 @@ $module: #{$prefix}-table;
             }
 
             & > .#{$module}-cell-fixed {
-
                 &-left,
                 &-right {
-                    z-index: $z-table_fixed_column;;
+                    z-index: $z-table_fixed_column;
                     position: sticky;
                     background-color: $color-table-bg-default;
                 }
@@ -262,6 +258,16 @@ $module: #{$prefix}-table;
                     border-left: $width-table_cell_fixed_right_first solid $color-table_shadow-border-default;
                     box-shadow: #{$shadow-table_left};
                 }
+
+                & > * {
+                    transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                        $transition_delay-table_body-bg;
+                }
+            }
+
+            & > * {
+                transition: background-color $transition_duration-table_body-bg $transition_function-table_body-bg
+                    $transition_delay-table_body-bg;
             }
         }
 
@@ -322,7 +328,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-selection {
-
         &-wrap {
             // inline-flex vertical-align baseline 会导致父元素高度异常
             display: inline-flex;
@@ -339,7 +344,6 @@ $module: #{$prefix}-table;
     }
 
     .#{$module}-column {
-
         &-hidden {
             display: none;
         }
@@ -433,7 +437,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-header {
-
             &::-webkit-scrollbar {
                 border-right: $border-table;
             }
@@ -446,7 +449,6 @@ $module: #{$prefix}-table;
         }
 
         .#{$module}-thead > .#{$module}-row > .#{$module}-row-head {
-
             .react-resizable-handle {
                 background-color: transparent;
             }
@@ -496,7 +498,6 @@ $module: #{$prefix}-table;
 
         // when header is fixed, table should use `table-layout: fixed` to avoid align bug
         &-header {
-
             table {
                 table-layout: fixed;
             }
@@ -504,9 +505,7 @@ $module: #{$prefix}-table;
     }
 
     &-scroll {
-
         &-position {
-
             &-left {
                 .#{$module}-tbody,
                 .#{$module}-thead {
@@ -550,4 +549,4 @@ $module: #{$prefix}-table;
     }
 }
 
-@import "./rtl.scss";
+@import './rtl.scss';

packages/semi-foundation/tabs/animation.scss

@@ -0,0 +1,23 @@
+$transition_duration-tabs_tab_line-border: var(--semi-transition_duration-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_duration-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_duration-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_duration-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

@@ -1,5 +1,6 @@
 //@import '../theme/variables.scss';
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tabs;
 
@@ -44,6 +45,8 @@ $module: #{$prefix}-tabs;
                 margin-right: $spacing-tabs_tab_icon-marginRight;
                 top: $spacing-tabs_tab_icon-top;
                 color: $color-tabs_tab-icon-default;
+                transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 color的transition
+           
             }
             
             .#{$prefix}-icon-close {
@@ -156,10 +159,13 @@ $module: #{$prefix}-tabs;
     &-bar-line {
         &.#{$module}-bar-top {
             border-bottom: $width-tabs_bar_line-border solid $color-tabs_tab_line_default-border-default;
+            transition: color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//线条式tabs的 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;
-                
+                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 的 transition
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
@@ -207,7 +213,9 @@ $module: #{$prefix}-tabs;
             .#{$module}-tab {
                 padding: $spacing-tabs_bar_line_tab_left-padding;
                 border-left: $width-tabs_bar_line_tab-border solid transparent;
-                
+                transition: background-color $transition_duration-tabs-tab_button-bg $transition_function-tabs_tab_button-bg $transition_delay-tabs_tab_button-bg,//按钮tabs的背景色的transition
+                color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的transition
+          
                 &:hover {
                     border-left: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                     background-color: $color-tabs_tab_line_vertical-bg-hover;
@@ -338,6 +346,10 @@ $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
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//卡片式tabs的 color的transition
+          
+            transform:scale($transform_scale-tabs_tab_card-item);
             
             &:hover {
                 background: $color-tabs_tab_card-bg-hover;
@@ -380,6 +392,10 @@ $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
+            color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text;//按钮式tabs的 color的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_duration-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_duration-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

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-tagInput;
 
@@ -10,7 +11,9 @@ $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;
+
     &-drag {
 
         &-item {

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

@@ -0,0 +1,7 @@
+$transition_duration-timePicker-bg: var(--semi-transition_duration-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_duration-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_duration-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

@@ -1,4 +1,5 @@
 @import "./variables.scss";
+@import "./animation.scss";
 
 $module: #{$prefix}-transfer;
 
@@ -75,6 +76,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_duration-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

@@ -1,4 +1,5 @@
 @import './variables.scss';
+@import "./animation.scss";
 
 $module: #{$prefix}-tree;
 
@@ -53,6 +54,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-scss-compile/src/utils/generateSCSSMap.ts

@@ -38,7 +38,7 @@ const generateComponentsScssMap = (foundationPath: string, iconPath?: string) =>
 
 
 const generateThemeScssMap = (themePath: string) => {
-    const fileList = ['_font.scss', '_palette.scss', 'global.scss', 'index.scss', 'local.scss', 'mixin.scss', 'variables.scss'] as const;
+    const fileList = ['_font.scss', '_palette.scss', 'global.scss','animation.scss', 'index.scss', 'local.scss', 'mixin.scss', 'variables.scss'] as const;
     const themeScssMap: { [key in typeof fileList[number]]?: string } = {};
     for (const fileName of fileList) {
         const scssAbsolutePath = path.join(themePath, 'scss', fileName);

packages/semi-scss-compile/src/utils/writeFile.ts

@@ -34,6 +34,7 @@ const preProcessScssMap = (scssMapOrigin: ReturnType<typeof generateScssMap>) =>
     let compilerEntryContent = '';
     compilerEntryContent += `@import "./theme/index.scss";\n`;
     compilerEntryContent += `@import "./theme/global.scss";\n`;
+    compilerEntryContent += `@import "./theme/animation.scss";\n`;
 
     for (const componentName of Object.keys(scssMap['components'])) {
         let scssFileName = `${componentName}.scss`;

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

@@ -0,0 +1,82 @@
+body{
+
+
+  --semi-transition_duration-slowest:0ms;
+  --semi-transition_duration-slower:0ms;
+  --semi-transition_duration-slow:0ms;
+  --semi-transition_duration-normal:0ms;
+  --semi-transition_duration-fast:0ms;
+  --semi-transition_duration-faster:0ms;
+  --semi-transition_duration-fastest:0ms;
+
+  --semi-transition_function-linear:linear;
+  --semi-transition_function-ease:ease;
+  --semi-transition_function-easeIn:ease-in;
+  --semi-transition_function-easeOut:ease-out;
+  --semi-transition_function-easeInIOut:ease-in-out;
+
+  --semi-transition_delay-slowest:0ms;
+  --semi-transition_delay-slower:0ms;
+  --semi-transition_delay-slow:0ms;
+  --semi-transition_delay-normal:0ms;
+  --semi-transition_delay-fast:0ms;
+  --semi-transition_delay-faster:0ms;
+  --semi-transition_delay-fastest:0ms;
+
+  --semi-transform_scale-none:scale(1,1);
+  --semi-transform_scale-small:scale(1,1);
+  --semi-transform_scale-medium:scale(1,1);
+  --semi-transform_scale-large:scale(1,1);
+
+  --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);
+
+
+  // has animation
+ 
+  // --semi-transition_duration-slowest:500ms;
+  // --semi-transition_duration-slower:500ms;
+  // --semi-transition_duration-slow:500ms;
+  // --semi-transition_duration-normal:500ms;
+  // --semi-transition_duration-fast:200ms;
+  // --semi-transition_duration-faster:100ms;
+  // --semi-transition_duration-fastest:50ms;
+
+  // --semi-transition_function-linear:linear;
+  // --semi-transition_function-ease:ease;
+  // --semi-transition_function-easeIn:ease-in;
+  // --semi-transition_function-easeOut:ease-out;
+  // --semi-transition_function-easeInIOut:ease-in-out;
+
+  // --semi-transition_delay-slowest:0ms;
+  // --semi-transition_delay-slower:0ms;
+  // --semi-transition_delay-slow:0ms;
+  // --semi-transition_delay-normal:0ms;
+  // --semi-transition_delay-fast:0ms;
+  // --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);
+
+
+}

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

@@ -1,3 +1,3 @@
 @import './mixin.scss';
 @import './variables.scss';
-@import './_font.scss';
+@import './_font.scss';

packages/semi-ui/autoComplete/__test__/autoComplete.test.js

@@ -191,7 +191,7 @@ describe('AutoComplete', () => {
         };
         let ac = getAc(props);
         expect(ac.exists(`.${BASE_CLASS_PREFIX}-autocomplete-loading-wrapper`)).toEqual(true);
-        expect(ac.exists(`.${BASE_CLASS_PREFIX}-select-option`)).toEqual(false);
+        expect(ac.exists(`.${BASE_CLASS_PREFIX}-autoComplete-option`)).toEqual(false);
     });
 
     it('【onSelect】trigger onSelect when click candidate option', () => {
@@ -204,7 +204,7 @@ describe('AutoComplete', () => {
             ...commonProps,
         };
         let ac = getAc(props);
-        let options = ac.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);
@@ -223,7 +223,7 @@ describe('AutoComplete', () => {
             ...commonProps,
         };
         let ac = getAc(props);
-        let options = ac.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);
@@ -269,7 +269,7 @@ describe('AutoComplete', () => {
             renderSelectedItem: option => option.email,
         };
         let ac = getAc(props);
-        let options = ac.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);
@@ -306,7 +306,7 @@ describe('AutoComplete', () => {
             value: '',
         };
         const ac = getAc(props);
-        ac.find(`.${BASE_CLASS_PREFIX}-select-option`)
+        ac.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`)
             .at(0)
             .simulate('click');
         expect(fakeOnChange.calledWith('XK')).toEqual(true);
@@ -374,7 +374,7 @@ describe('AutoComplete', () => {
         let event = { target: { value: 'abc' } };
         component.find('input').simulate('change', event);
         expect(spyOnChange.calledWith('abc')).toEqual(true);
-        let options = component.find(`.${BASE_CLASS_PREFIX}-select-option`);
+        let options = component.find(`.${BASE_CLASS_PREFIX}-autoComplete-option`);
         let firstOption = options.at(0);
         const nativeEvent = { nativeEvent: { stopImmediatePropagation: noop } };
         firstOption.simulate('click', nativeEvent);

packages/semi-ui/autoComplete/index.tsx

@@ -14,7 +14,7 @@ import Popover from '../popover';
 import Input from '../input';
 import Trigger from '../trigger';
 
-import Option from '../select/option';
+import Option from './option';
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import '@douyinfe/semi-foundation/autoComplete/autoComplete.scss';
 import { Motion } from '../_base/base';

packages/semi-ui/autoComplete/option.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable max-len */
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { isString } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/autoComplete/constants';
+import LocaleConsumer from '../locale/localeConsumer';
+import { IconTick } from '@douyinfe/semi-icons';
+import { getHighLightTextHTML } from '../_utils/index';
+import { Locale } from '../locale/interface';
+import { BasicOptionProps } from '@douyinfe/semi-foundation/autoComplete/optionFoundation';
+
+export interface OptionProps extends BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface renderOptionContentArgument {
+    config: {
+        searchWords: any;
+        sourceString: React.ReactNode;
+    };
+    children: React.ReactNode;
+    inputValue: string;
+    prefixCls: string;
+}
+class Option extends PureComponent<OptionProps> {
+    static isSelectOption = true;
+
+    static propTypes = {
+        children: PropTypes.node,
+        disabled: PropTypes.bool,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        selected: PropTypes.bool,
+        label: PropTypes.node,
+        empty: PropTypes.bool,
+        emptyContent: PropTypes.node,
+        onSelect: PropTypes.func,
+        focused: PropTypes.bool,
+        showTick: PropTypes.bool,
+        className: PropTypes.string,
+        style: PropTypes.object,
+        onMouseEnter: PropTypes.func,
+        prefixCls: PropTypes.string,
+        renderOptionItem: PropTypes.func,
+        inputValue: PropTypes.string,
+    };
+
+    static defaultProps = {
+        prefixCls: cssClasses.PREFIX_OPTION
+    };
+
+    onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent) {
+        const { props } = this;
+        const isDisabled = props.disabled;
+        if (!isDisabled) {
+            props.onSelect({ ...rest, value, label: label || children }, event);
+        }
+    }
+
+    renderOptionContent({ config, children, inputValue, prefixCls }: renderOptionContentArgument) {
+        if (isString(children) && inputValue) {
+            return getHighLightTextHTML(config as any);
+        }
+        return children;
+    }
+
+    render() {
+        const {
+            children,
+            disabled,
+            value,
+            selected,
+            label,
+            empty,
+            emptyContent,
+            onSelect,
+            focused,
+            showTick,
+            className,
+            style,
+            onMouseEnter,
+            prefixCls,
+            renderOptionItem,
+            inputValue,
+            ...rest
+        } = this.props;
+        const optionClassName = classNames(prefixCls, {
+            [`${prefixCls}-disabled`]: disabled,
+            [`${prefixCls}-selected`]: selected,
+            [`${prefixCls}-focused`]: focused,
+            [`${prefixCls}-empty`]: empty,
+            [className]: className,
+        });
+        const selectedIconClassName = classNames([`${prefixCls}-icon`]);
+
+        if (empty) {
+            if (emptyContent === null) {
+                return null;
+            }
+            return (
+                <LocaleConsumer<Locale['Select']> componentName="Select">
+                    {(locale: Locale['Select']) => (
+                        <div className={optionClassName} x-semi-prop="emptyContent">
+                            {emptyContent || locale.emptyText}
+                        </div>
+                    )}
+                </LocaleConsumer>
+            );
+        }
+
+        // Since there are empty, locale and other logic, the custom renderOptionItem is directly converged to the internal option instead of being placed in Select/index
+        if (typeof renderOptionItem === 'function') {
+            return renderOptionItem({
+                disabled,
+                focused,
+                selected,
+                style,
+                label,
+                value,
+                inputValue,
+                onMouseEnter: (e: React.MouseEvent) => onMouseEnter(e),
+                onClick: (e: React.MouseEvent) => this.onClick({ value, label, children, ...rest }, e),
+                ...rest
+            });
+        }
+
+        const config = {
+            searchWords: inputValue,
+            sourceString: children,
+            option: {
+                highlightClassName: `${prefixCls}-keyword`
+            }
+        };
+        return (
+            // eslint-disable-next-line jsx-a11y/interactive-supports-focus,jsx-a11y/click-events-have-key-events
+            <div
+                className={optionClassName}
+                onClick={e => {
+                    this.onClick({ value, label, children, ...rest }, e);
+                }}
+                onMouseEnter={e => onMouseEnter && onMouseEnter(e)}
+                role="option"
+                aria-selected={selected ? "true" : "false"}
+                aria-disabled={disabled ? "true" : "false"}
+                style={style}
+            >
+                {showTick ? (
+                    <div className={selectedIconClassName}>
+                        <IconTick />
+                    </div>
+                ) : null}
+                {isString(children) ? <div className={`${prefixCls}-text`}>{this.renderOptionContent({ children, config, inputValue, prefixCls })}</div> : children}
+            </div>
+        );
+    }
+}
+
+export default Option;

packages/semi-ui/gulpfile.js

@@ -63,8 +63,10 @@ gulp.task('compileScss', function compileScss() {
                 const rootPath = path.join(__dirname, '../../');
                 const scssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/index.scss";\n`;
                 const cssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/global.scss";\n`;
+                const animationStr = `@import "${rootPath}/packages/semi-theme-default/scss/animation.scss";\n`;
+                const animationBuffer = Buffer.from(animationStr);
                 const scssBuffer = Buffer.from(scssVarStr);
-                const buffers = [scssBuffer];
+                const buffers = [scssBuffer,animationBuffer];
                 if (/_base\/base\.scss/.test(chunk.path)) {
                     buffers.push(Buffer.from(cssVarStr));
                 }

packages/semi-webpack/src/semi-theme-loader.ts

@@ -8,7 +8,7 @@ export default function SemiThemeLoader(source: string) {
     const scssVarStr = `@import "~${theme}/scss/index.scss";\n`;
     // inject once
     const cssVarStr = `@import "~${theme}/scss/global.scss";\n`;
-
+    const animationStr = `@import "~${theme}/scss/animation.scss";\n`;
     const shouldInject = source.includes('semi-base');
 
     let fileStr = source;
@@ -45,7 +45,7 @@ export default function SemiThemeLoader(source: string) {
     const prefixClsStr = `$prefix: '${prefixCls}';\n`;
 
     if (shouldInject) {
-        return `${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
+        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}`;
     } else {
         return `${scssVarStr}${prefixClsStr}${fileStr}`;
     }