refactor(hooks): refactor transition (#2556)

* refactor(hooks): refactor transition

- Introduce new hook named useTransition
- Update transition.scss with css vars

* - Align variable name.

* - Update transitions to cssvars

* - Address PR comments

packages/hooks/__tests__/use-transition.spec.ts

@@ -0,0 +1,101 @@
+import { defineComponent, Fragment, h, nextTick, ref } from 'vue'
+import { mount } from '@vue/test-utils'
+import { getCssVariable } from '@element-plus/test-utils/dom'
+import { useTransition, useTransitionProps } from '../use-transition'
+
+const transitionShow = 'show'
+const transitionHide = 'hide'
+
+describe('use-transition', () => {
+  const TestComp = defineComponent({
+    props: useTransitionProps,
+    setup(props) {
+      const indicator = ref(false)
+
+      const { transitionStyle, transition } = useTransition(props, indicator)
+      const toggle = () => (indicator.value = !indicator.value)
+      return () => {
+        return h(Fragment, { key: 0 }, [
+          h(
+            'div',
+            {
+              style: transitionStyle.value,
+              class: 'content',
+            },
+            transition.value,
+          ),
+          h(
+            'button',
+            {
+              onClick: toggle,
+              class: 'toggle',
+            },
+            'toggle',
+          ),
+        ])
+      }
+    },
+  })
+
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(TestComp, {
+      props: {
+        transitionShow,
+        transitionHide,
+      },
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should render correctly', async () => {
+    expect(wrapper.find('.content').text()).toBe(
+      `el-transition--${transitionHide}`,
+    )
+    expect(
+      getCssVariable(
+        wrapper.find('.content').element,
+        '--el-transition-duration',
+      ),
+    ).toBe('0.3s')
+  })
+
+  it('should be able to update transition class', async () => {
+    expect(wrapper.find('.content').text()).toBe(
+      `el-transition--${transitionHide}`,
+    )
+
+    await wrapper.find('.toggle').trigger('click') // this tick indicator gets changed
+    await nextTick() // this tick the inner value transitionState gets changed
+    await nextTick() // this tick the computed value gets updated
+    expect(wrapper.find('.content').text()).toBe(
+      `el-transition--${transitionShow}`,
+    )
+  })
+
+  it('should be able to change the transition duration via props', async () => {
+    expect(wrapper.find('.content').text()).toBe(
+      `el-transition--${transitionHide}`,
+    )
+    expect(
+      getCssVariable(
+        wrapper.find('.content').element,
+        '--el-transition-duration',
+      ),
+    ).toBe('0.3s')
+
+    await wrapper.setProps({
+      transitionDuration: 0.2,
+    })
+
+    expect(
+      getCssVariable(
+        wrapper.find('.content').element,
+        '--el-transition-duration',
+      ),
+    ).toBe('0.2s')
+  })
+})

packages/hooks/use-transition/index.ts

@@ -0,0 +1,35 @@
+import { computed, ref, watch, nextTick } from 'vue'
+
+import type { ExtractPropTypes, Ref } from 'vue'
+
+export const useTransitionProps = {
+  transitionDuration: {
+    type: Number,
+    default: 0.3,
+  },
+  transitionShow: String,
+  transitionHide: String,
+}
+
+export const useTransition = (
+  props: ExtractPropTypes<typeof useTransitionProps>,
+  indicator: Ref<boolean>,
+) => {
+  const transitionState = ref(indicator.value)
+  watch(indicator, val => {
+    nextTick(() => transitionState.value = val)
+  })
+
+  return {
+    transition: computed(() => {
+      return `el-transition--${
+        transitionState.value
+          ? props.transitionShow
+          : props.transitionHide
+      }`
+    }),
+    transitionStyle: computed(() =>
+      `--el-transition-duration: ${props.transitionDuration}s`,
+    ),
+  }
+}

packages/theme-chalk/src/alert.scss

@@ -31,7 +31,7 @@
   opacity: 1;
   display: flex;
   align-items: center;
-  transition: opacity 0.2s;
+  transition: opacity var(--el-transition-duration-fast);
 
   @include when(light) {
     .#{$namespace}-alert__closebtn {

packages/theme-chalk/src/breadcrumb.scss

@@ -28,7 +28,7 @@
       & a {
         font-weight: bold;
         text-decoration: none;
-        transition: $--color-transition-base;
+        transition: var(--el-color-transition-base);
         color: $--color-text-primary;
 
         &:hover {

packages/theme-chalk/src/calendar.scss

@@ -44,7 +44,7 @@
     border-bottom: $--calendar-border;
     border-right: $--calendar-border;
     vertical-align: top;
-    transition: background-color 0.2s ease;
+    transition: background-color var(--el-transition-duration-fast) ease;
 
     @include when(selected) {
       background-color: $--calendar-selected-background-color;

packages/theme-chalk/src/card.scss

@@ -7,7 +7,7 @@
   background-color: $--color-white;
   overflow: hidden;
   color: $--color-text-primary;
-  transition: 0.3s;
+  transition: var(--el-transition-duration);
 
   @include when(always-shadow) {
     box-shadow: $--box-shadow-light;

packages/theme-chalk/src/carousel-item.scss

@@ -45,6 +45,6 @@
     left: 0;
     background-color: $--color-white;
     opacity: 0.24;
-    transition: 0.2s;
+    transition: var(--el-transition-duration-fast);
   }
 }

packages/theme-chalk/src/carousel.scss

@@ -27,7 +27,7 @@
     height: $--carousel-arrow-size;
     width: $--carousel-arrow-size;
     cursor: pointer;
-    transition: 0.3s;
+    transition: var(--el-transition-duration);
     border-radius: 50%;
     background-color: $--carousel-arrow-background;
     color: $--color-white;
@@ -149,7 +149,7 @@
     padding: 0;
     margin: 0;
     cursor: pointer;
-    transition: 0.3s;
+    transition: var(--el-transition-duration);
   }
 }
 

packages/theme-chalk/src/cascader.scss

@@ -33,7 +33,7 @@
     }
 
     .#{$namespace}-icon-arrow-down {
-      transition: transform 0.3s;
+      transition: transform var(--el-transition-duration);
       font-size: 14px;
 
       @include when(reverse) {

packages/theme-chalk/src/check-tag.scss

@@ -12,7 +12,7 @@
   font-size: var(--el-font-size-base);
   line-height: var(--el-font-size-base);
   padding: 7px 15px;
-  transition: $--all-transition;
+  transition: var(--el-all-transition);
   font-weight: bold;
   &:hover {
     background-color: rgb(220, 223, 230);

packages/theme-chalk/src/checkbox.scss

@@ -290,7 +290,7 @@
     outline: none;
     margin: 0;
     position: relative;
-    transition: $--all-transition;
+    transition: var(--el-all-transition);
     @include utils-user-select(none);
 
     @include button-size(

packages/theme-chalk/src/collapse.scss

@@ -24,11 +24,11 @@
     border-bottom: 1px solid $--collapse-border-color;
     font-size: $--collapse-header-font-size;
     font-weight: 500;
-    transition: border-bottom-color 0.3s;
+    transition: border-bottom-color var(--el-transition-duration);
     outline: none;
     @include e(arrow) {
       margin: 0 8px 0 auto;
-      transition: transform 0.3s;
+      transition: transform var(--el-transition-duration);
       font-weight: 300;
       @include when(active) {
         transform: rotate(90deg);

packages/theme-chalk/src/common/popup.scss

@@ -2,11 +2,11 @@
 @import '../mixins/mixins';
 
 .v-modal-enter {
-  animation: v-modal-in 0.2s ease;
+  animation: v-modal-in var(--el-transition-duration-fast) ease;
 }
 
 .v-modal-leave {
-  animation: v-modal-out 0.2s ease forwards;
+  animation: v-modal-out var(--el-transition-duration-fast) ease forwards;
 }
 
 @keyframes v-modal-in {

packages/theme-chalk/src/common/transition.scss

@@ -3,7 +3,7 @@
 
 .fade-in-linear-enter-active,
 .fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
+  transition: var(--el-fade-linear-transition);
 }
 
 .fade-in-linear-enter-from,
@@ -13,7 +13,7 @@
 
 .#{$namespace}-fade-in-linear-enter-active,
 .#{$namespace}-fade-in-linear-leave-active {
-  transition: $--fade-linear-transition;
+  transition: var(--el-fade-linear-transition);
 }
 .#{$namespace}-fade-in-linear-enter-from,
 .#{$namespace}-fade-in-linear-leave-to {
@@ -22,7 +22,7 @@
 
 .#{$namespace}-fade-in-enter-active,
 .#{$namespace}-fade-in-leave-active {
-  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: all var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
 }
 .#{$namespace}-fade-in-enter-from,
 .#{$namespace}-fade-in-leave-active {
@@ -31,7 +31,7 @@
 
 .#{$namespace}-zoom-in-center-enter-active,
 .#{$namespace}-zoom-in-center-leave-active {
-  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: all var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
 }
 .#{$namespace}-zoom-in-center-enter-from,
 .#{$namespace}-zoom-in-center-leave-active {
@@ -43,7 +43,7 @@
 .#{$namespace}-zoom-in-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
-  transition: $--md-fade-transition;
+  transition: var(--el-md-fade-transition);
   transform-origin: center top;
 
   &[data-popper-placement^='top'] {
@@ -60,7 +60,7 @@
 .#{$namespace}-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
-  transition: $--md-fade-transition;
+  transition: var(--el-md-fade-transition);
   transform-origin: center bottom;
 }
 .#{$namespace}-zoom-in-bottom-enter-from,
@@ -73,7 +73,7 @@
 .#{$namespace}-zoom-in-left-leave-active {
   opacity: 1;
   transform: scale(1, 1);
-  transition: $--md-fade-transition;
+  transition: var(--el-md-fade-transition);
   transform-origin: top left;
 }
 .#{$namespace}-zoom-in-left-enter-from,
@@ -83,12 +83,12 @@
 }
 
 .collapse-transition {
-  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out,
-    0.3s padding-bottom ease-in-out;
+  transition: var(--el-transition-duration) height ease-in-out, var(--el-transition-duration) padding-top ease-in-out,
+    var(--el-transition-duration) padding-bottom ease-in-out;
 }
 .horizontal-collapse-transition {
-  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out,
-    0.3s padding-right ease-in-out;
+  transition: var(--el-transition-duration) width ease-in-out, var(--el-transition-duration) padding-left ease-in-out,
+    var(--el-transition-duration) padding-right ease-in-out;
 }
 
 .#{$namespace}-list-enter-active,
@@ -102,5 +102,5 @@
 }
 
 .#{$namespace}-opacity-transition {
-  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+  transition: opacity var(--el-transition-duration) cubic-bezier(0.55, 0, 0.1, 1);
 }

packages/theme-chalk/src/common/var.scss

@@ -10,14 +10,29 @@
 
 /* Transition
 -------------------------- */
-$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
-$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
-  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color 0.2s
-  cubic-bezier(0.645, 0.045, 0.355, 1) !default;
-$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+// refer to this website to get the bezier motion function detail
+//  https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+
+:root {
+
+  --el-transition-duration: 0.3s;
+  --el-transition-duration-fast: 0.2s;
+  --el-ease-in-out-bezier-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --el-fast-bezier-transition: cubic-bezier(0.23, 1, 0.32, 1);
+
+  --el-all-transition: all var(--el-transition-duration)
+    var(--el-ease-in-out-bezier-function);
+  --el-fade-transition: opacity var(--el-transition-duration)
+    var(--el-fast-bezier-transition);
+  --el-md-fade-transition: transform var(--el-transition-duration)
+      var(--el-fast-bezier-transition),
+    opacity var(--el-transition-duration) var(--el-fast-bezier-transition);
+  --el-fade-linear-transition: opacity var(--el-transition-duration-fast) linear;
+  --el-border-transition-base: border-color var(--el-transition-duration-fast)
+    var(--el-ease-in-out-bezier-function);
+  --el-color-transition-base: color var(--el-transition-duration-fast)
+    var(--el-ease-in-out-bezier-function);
+}
 
 /* Color
 -------------------------- */

packages/theme-chalk/src/dialog.scss

@@ -95,16 +95,16 @@
 }
 
 .dialog-fade-enter-active {
-  animation: modal-fade-in 0.3s !important;
+  animation: modal-fade-in var(--el-transition-duration) !important;
   .#{$namespace}-dialog {
-    animation: dialog-fade-in 0.3s;
+    animation: dialog-fade-in var(--el-transition-duration);
   }
 }
 
 .dialog-fade-leave-active {
-  animation: modal-fade-out 0.3s;
+  animation: modal-fade-out var(--el-transition-duration);
   .#{$namespace}-dialog {
-    animation: dialog-fade-out 0.3s;
+    animation: dialog-fade-out var(--el-transition-duration);
   }
 }
 

packages/theme-chalk/src/drawer.scss

@@ -53,13 +53,13 @@
 
 @mixin animation-in($direction) {
   &.#{$direction} {
-    animation: #{$direction}-drawer-animation 0.3s linear reverse;
+    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear reverse;
   }
 }
 
 @mixin animation-out($direction) {
   &.#{$direction} {
-    animation: #{$direction}-drawer-animation 0.3s linear;
+    animation: #{$direction}-drawer-animation var(--el-transition-duration) linear;
   }
 }
 
@@ -162,11 +162,11 @@ $directions: rtl, ltr, ttb, btt;
 }
 
 .#{$namespace}-drawer-fade-enter-active {
-  animation: #{$namespace}-drawer-fade-in 0.3s;
+  animation: #{$namespace}-drawer-fade-in var(--el-transition-duration);
   overflow: hidden !important;
 }
 
 .#{$namespace}-drawer-fade-leave-active {
   overflow: hidden !important;
-  animation: #{$namespace}-drawer-fade-in 0.3s reverse;
+  animation: #{$namespace}-drawer-fade-in var(--el-transition-duration) reverse;
 }

packages/theme-chalk/src/image-viewer.scss

@@ -103,11 +103,11 @@
 }
 
 .viewer-fade-enter-active {
-  animation: viewer-fade-in 0.3s;
+  animation: viewer-fade-in var(--el-transition-duration);
 }
 
 .viewer-fade-leave-active {
-  animation: viewer-fade-out 0.3s;
+  animation: viewer-fade-out var(--el-transition-duration);
 }
 
 @keyframes viewer-fade-in {

packages/theme-chalk/src/input.scss

@@ -23,7 +23,7 @@
     background-image: none;
     border: $--input-border;
     border-radius: $--input-border-radius;
-    transition: $--border-transition-base;
+    transition: var(--el-border-transition-base);
 
     &::placeholder {
       color: $--input-placeholder-color;
@@ -85,7 +85,7 @@
     color: $--input-icon-color;
     font-size: map.get($--input-font-size, 'default');
     cursor: pointer;
-    transition: $--color-transition-base;
+    transition: var(--el-color-transition-base);
 
     &:hover {
       color: $--input-clear-hover-color;
@@ -121,7 +121,7 @@
     line-height: map.get($--input-height, 'default');
     outline: none;
     padding: 0 15px;
-    transition: $--border-transition-base;
+    transition: var(--el-border-transition-base);
     width: 100%;
 
     &::placeholder {
@@ -145,7 +145,7 @@
     top: 0;
     text-align: center;
     color: $--input-icon-color;
-    transition: all 0.3s;
+    transition: all var(--el-transition-duration);
     pointer-events: none;
   }
 
@@ -160,13 +160,13 @@
     top: 0;
     text-align: center;
     color: $--input-icon-color;
-    transition: all 0.3s;
+    transition: all var(--el-transition-duration);
   }
 
   @include e(icon) {
     width: 25px;
     text-align: center;
-    transition: all 0.3s;
+    transition: all var(--el-transition-duration);
     line-height: map.get($--input-height, 'default');
 
     &:after {

packages/theme-chalk/src/loading.scss

@@ -22,7 +22,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  transition: opacity 0.3s;
+  transition: opacity var(--el-transition-duration);
 
   @include when(fullscreen) {
     position: fixed;

packages/theme-chalk/src/menu.scss

@@ -13,7 +13,7 @@
   list-style: none;
   cursor: pointer;
   position: relative;
-  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
+  transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration), color var(--el-transition-duration);
   box-sizing: border-box;
   white-space: nowrap;
 
@@ -234,7 +234,7 @@
     top: 50%;
     right: 20px;
     margin-top: -7px;
-    transition: transform 0.3s;
+    transition: transform var(--el-transition-duration);
     font-size: 12px;
   }
   @include when(active) {
@@ -279,6 +279,6 @@
 .horizontal-collapse-transition
   .#{$namespace}-submenu__title
   .#{$namespace}-submenu__icon-arrow {
-  transition: 0.2s;
+  transition: var(--el-transition-duration-fast);
   opacity: 0;
 }

packages/theme-chalk/src/message-box.scss

@@ -192,13 +192,13 @@
 
 .fade-in-linear-enter-active {
   .#{$namespace}-message-box {
-    animation: msgbox-fade-in 0.3s;
+    animation: msgbox-fade-in var(--el-transition-duration);
   }
 }
 
 .fade-in-linear-leave-active {
   .#{$namespace}-message-box {
-    animation: msgbox-fade-in 0.3s reverse;
+    animation: msgbox-fade-in var(--el-transition-duration) reverse;
   }
 }
 

packages/theme-chalk/src/message.scss

@@ -15,7 +15,7 @@
   top: 20px;
   transform: translateX(-50%);
   background-color: $--message-background-color;
-  transition: opacity 0.3s, transform 0.4s, top 0.4s;
+  transition: opacity var(--el-transition-duration), transform 0.4s, top 0.4s;
   overflow: hidden;
   padding: $--message-padding;
   display: flex;

packages/theme-chalk/src/notification.scss

@@ -34,8 +34,8 @@
   position: fixed;
   background-color: var(--el-color-white);
   box-shadow: var(--el-notification-shadow);
-  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
-    bottom 0.3s;
+  transition: opacity var(--el-transition-duration), transform var(--el-transition-duration), left var(--el-transition-duration), right var(--el-transition-duration), top 0.4s,
+    bottom var(--el-transition-duration);
   overflow-wrap: anywhere;
   overflow: hidden;
   z-index: 9999;

packages/theme-chalk/src/radio-button.scss

@@ -26,7 +26,7 @@
     margin: 0;
     position: relative;
     cursor: pointer;
-    transition: $--all-transition;
+    transition: var(--el-all-transition);
 
     @include button-size(
       map.get($--button-padding-vertical, 'default'),

packages/theme-chalk/src/rate.scss

@@ -23,7 +23,7 @@
     font-size: $--rate-icon-size;
     margin-right: $--rate-icon-margin;
     color: $--rate-icon-color;
-    transition: 0.3s;
+    transition: var(--el-transition-duration);
     &.hover {
       transform: scale(1.15);
     }

packages/theme-chalk/src/scrollbar.scss

@@ -26,7 +26,7 @@
     cursor: pointer;
     border-radius: inherit;
     background-color: $--scrollbar-background-color;
-    transition: 0.3s background-color;
+    transition: var(--el-transition-duration) background-color;
 
     &:hover {
       background-color: $--scrollbar-hover-background-color;

packages/theme-chalk/src/select-v2.scss

@@ -27,7 +27,7 @@ $--input-inline-start: 7px !default;
     padding-bottom: 1px;
     border: 1px solid var(--el-border-color-base);
     border-radius: $--border-radius-base;
-    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color var(--el-transition-duration-fast) cubic-bezier(0.645, 0.045, 0.355, 1);
 
     &:hover {
       border-color: $--color-text-placeholder;
@@ -203,7 +203,7 @@ $--input-inline-start: 7px !default;
   @include e(caret) {
     color: $--select-input-color;
     font-size: $--select-input-font-size;
-    transition: transform 0.3s;
+    transition: transform var(--el-transition-duration);
     transform: rotateZ(180deg);
     cursor: pointer;
 
@@ -217,7 +217,7 @@ $--input-inline-start: 7px !default;
       transform: rotateZ(180deg);
       border-radius: $--border-radius-circle;
       color: $--select-input-color;
-      transition: $--color-transition-base;
+      transition: var(--el-color-transition-base);
 
       &:hover {
         color: $--select-close-hover-color;
@@ -238,7 +238,7 @@ $--input-inline-start: 7px !default;
     border: 1px solid #d9d9d9;
     border-radius: $--border-radius-base;
     position: relative;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
   }
 
   @include e(input-calculator) {

packages/theme-chalk/src/select.scss

@@ -62,7 +62,7 @@
     & .#{$namespace}-select__caret {
       color: $--select-input-color;
       font-size: $--select-input-font-size;
-      transition: transform 0.3s;
+      transition: transform var(--el-transition-duration);
       transform: rotateZ(180deg);
       cursor: pointer;
 
@@ -76,7 +76,7 @@
         transform: rotateZ(180deg);
         border-radius: $--border-radius-circle;
         color: $--select-input-color;
-        transition: $--color-transition-base;
+        transition: var(--el-color-transition-base);
 
         &:hover {
           color: $--select-close-hover-color;

packages/theme-chalk/src/slider.scss

@@ -124,7 +124,7 @@
     background-color: $--color-white;
     border-radius: 50%;
     box-sizing: border-box;
-    transition: 0.2s;
+    transition: var(--el-transition-duration-fast);
     user-select: none;
 
     &:hover,
@@ -208,7 +208,7 @@
           border: $--input-border;
           line-height: 20px;
           box-sizing: border-box;
-          transition: $--border-transition-base;
+          transition: var(--el-border-transition-base);
         }
         .#{$namespace}-input-number__decrease {
           width: 18px;

packages/theme-chalk/src/switch.scss

@@ -17,7 +17,7 @@
   }
 
   @include e(label) {
-    transition: 0.2s;
+    transition: var(--el-transition-duration-fast);
     height: $--switch-height;
     display: inline-block;
     font-size: $--switch-font-size;
@@ -63,7 +63,7 @@
     box-sizing: border-box;
     background: $--switch-off-color;
     cursor: pointer;
-    transition: border-color 0.3s, background-color 0.3s;
+    transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
     vertical-align: middle;
 
     .#{$namespace}-switch__action {
@@ -71,7 +71,7 @@
       top: 1px;
       left: 1px;
       border-radius: $--border-radius-circle;
-      transition: all 0.3s;
+      transition: all var(--el-transition-duration);
       width: $--switch-button-size;
       height: $--switch-button-size;
       background-color: $--color-white;

packages/theme-chalk/src/table.scss

@@ -46,7 +46,7 @@
     cursor: pointer;
     color: #666;
     font-size: 12px;
-    transition: transform 0.2s ease-in-out;
+    transition: transform var(--el-transition-duration-fast) ease-in-out;
     height: 20px;
 
     @include m(expanded) {

packages/theme-chalk/src/tabs.scss

@@ -14,7 +14,7 @@
     height: 2px;
     background-color: $--color-primary;
     z-index: 1;
-    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: transform var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
     list-style: none;
   }
   @include e(new-tab) {
@@ -79,7 +79,7 @@
   @include e(nav) {
     white-space: nowrap;
     position: relative;
-    transition: transform 0.3s;
+    transition: transform var(--el-transition-duration);
     float: left;
     z-index: calc(var(--el-index-normal) + 1);
 
@@ -112,7 +112,7 @@
     & .#{$namespace}-icon-close {
       border-radius: 50%;
       text-align: center;
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
       margin-left: 5px;
       &:before {
         transform: scale(0.9);
@@ -176,8 +176,8 @@
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
       border-bottom: 1px solid transparent;
       border-left: 1px solid var(--el-border-color-light);
-      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-        padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: color var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
       &:first-child {
         border-left: none;
       }
@@ -222,7 +222,7 @@
       content: none;
     }
     > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
-      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      transition: all var(--el-transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
       border: 1px solid transparent;
       margin-top: -1px;
       color: $--color-text-secondary;
@@ -517,22 +517,22 @@
   display: inline-block;
 }
 .slideInRight-enter {
-  animation: slideInRight-enter 0.3s;
+  animation: slideInRight-enter var(--el-transition-duration);
 }
 .slideInRight-leave {
   position: absolute;
   left: 0;
   right: 0;
-  animation: slideInRight-leave 0.3s;
+  animation: slideInRight-leave var(--el-transition-duration);
 }
 .slideInLeft-enter {
-  animation: slideInLeft-enter 0.3s;
+  animation: slideInLeft-enter var(--el-transition-duration);
 }
 .slideInLeft-leave {
   position: absolute;
   left: 0;
   right: 0;
-  animation: slideInLeft-leave 0.3s;
+  animation: slideInLeft-leave var(--el-transition-duration);
 }
 
 @keyframes slideInRight-enter {

packages/theme-chalk/src/tree.scss

@@ -87,7 +87,7 @@
     font-size: 12px;
 
     transform: rotate(0deg);
-    transition: transform 0.3s ease-in-out;
+    transition: transform var(--el-transition-duration) ease-in-out;
 
     &.expanded {
       transform: rotate(90deg);

packages/theme-chalk/src/upload.scss

@@ -237,7 +237,7 @@
     overflow: hidden;
     padding-left: 4px;
     text-overflow: ellipsis;
-    transition: color 0.3s;
+    transition: color var(--el-transition-duration);
     white-space: nowrap;
 
     [class^='#{$namespace}-icon'] {
@@ -343,7 +343,7 @@
       opacity: 0;
       font-size: 20px;
       background-color: rgba(0, 0, 0, 0.5);
-      transition: opacity 0.3s;
+      transition: opacity var(--el-transition-duration);
       &::after {
         display: inline-block;
         content: '';
@@ -548,7 +548,7 @@
       font-size: 14px;
       cursor: pointer;
       vertical-align: middle;
-      transition: $--md-fade-transition;
+      transition: var(--el-md-fade-transition);
       margin-top: 60px;
 
       i {

packages/theme-chalk/src/var.scss

@@ -4,6 +4,10 @@
 @import 'common/var';
 @import 'mixins/var';
 
+// for better performance do not dynamically change the root variable if you really
+// do not need that, since this could introduce recalculation overhead for rendering.
+// https://lisilinhart.info/posts/css-variables-performance/
+
 :root {
   --el-color-primary: #{$--color-primary};
   --el-color-white: #{$--color-white};