From d1829da2e77131e031479ef9aa4f6d00d6307a52 Mon Sep 17 00:00:00 2001
From: Simon Guo <simonguo.2009@gmail.com>
Date: Thu, 12 Jan 2023 15:16:39 +0800
Subject: [PATCH] perf(CSS transitions): improved duration of transitions
 (#3016)

* fix(CSS transitions): improved duration of transitions

* test(Sidebar): fix tests
---
 src/Picker/styles/index.less           |  1 -
 src/Picker/styles/mixin.less           | 21 +--------------------
 src/Sidebar/test/SidebarStylesSpec.tsx |  2 +-
 src/styles/variables.less              | 15 +++++++--------
 4 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/src/Picker/styles/index.less b/src/Picker/styles/index.less
index 84e84ab10..833a4b8a4 100644
--- a/src/Picker/styles/index.less
+++ b/src/Picker/styles/index.less
@@ -382,7 +382,6 @@
       display: block;
       padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal
         @picker-item-content-padding-vertical @picker-check-item-content-padding-left;
-      transition: @picker-item-transition;
       line-height: @line-height-computed;
 
       .high-contrast-mode({
diff --git a/src/Picker/styles/mixin.less b/src/Picker/styles/mixin.less
index 3c7cb1aef..9259d178e 100644
--- a/src/Picker/styles/mixin.less
+++ b/src/Picker/styles/mixin.less
@@ -31,21 +31,15 @@
     padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
     padding-right: (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
     position: relative;
-    cursor: default;
-    transition: @picker-item-transition;
+    cursor: pointer;
     color: var(--rs-text-heading);
 
-    &:hover {
-      background-color: var(--rs-state-hover-bg);
-    }
-
     .rs-@{prefix}-menu-group-caret {
       display: inline-block;
       margin-left: 2px;
       position: absolute;
       top: @padding-y;
       right: @padding-x;
-      transition: transform 0.3s linear;
       padding: 3px;
     }
   }
@@ -60,19 +54,6 @@
   }
 }
 
-.picker-select-item() {
-  display: block;
-  padding: @picker-item-content-padding-vertical @picker-item-content-padding-horizontal;
-  clear: both;
-  font-weight: normal;
-  line-height: @line-height-base;
-  color: var(--rs-text-primary);
-  cursor: pointer; //fixed link has not [href] style
-  transition: @picker-item-transition;
-  text-decoration: none;
-  width: 100%;
-}
-
 .picker-item-hover() {
   color: var(--rs-text-primary);
   background-color: var(--rs-state-hover-bg);
diff --git a/src/Sidebar/test/SidebarStylesSpec.tsx b/src/Sidebar/test/SidebarStylesSpec.tsx
index ab6275d74..9143a9dbb 100644
--- a/src/Sidebar/test/SidebarStylesSpec.tsx
+++ b/src/Sidebar/test/SidebarStylesSpec.tsx
@@ -12,7 +12,7 @@ describe('Sidebar styles', () => {
     const dom = getDOMNode(instanceRef.current);
     assert.equal(
       getStyle(dom, 'transition'),
-      'flex 0.2s ease-in 0s, width 0.2s ease-in 0s',
+      'flex 0.15s ease-in 0s, width 0.15s ease-in 0s',
       'Sidebar collapse transition'
     );
   });
diff --git a/src/styles/variables.less b/src/styles/variables.less
index 1b8d823b8..40d78d6b3 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -241,7 +241,7 @@
 @btn-border-radius-base:    @border-radius; // @deprecated use @btn-border-radius instead
 @btn-border-radius:         @btn-border-radius-base;
 
-@btn-transition:            color 0.2s linear, background-color 0.3s linear;
+@btn-transition:            color 0.15s ease-out, background-color 0.15s ease-out;
 @btn-disabled-opacity:      0.3;
 
 // Ghost Button
@@ -312,7 +312,7 @@
 @input-padding-y:               @padding-base-input-vertical;
 @input-padding-x:               @padding-base-input-horizontal;
 @input-border-width:            1px;
-@input-transition:              border-color ease-in-out 0.3s;
+@input-transition:              border-color ease-in-out 0.15s;
 
 // This has no effect on `<select>`s  in some browsers, due to the limited stylability of `<select>`s in CSS.
 @input-border-radius:       @border-radius;
@@ -368,7 +368,7 @@
 // Toggle
 
 @toggle-active-scale: 1.2;
-@toggle-transition:   0.2s ease-in-out;
+@toggle-transition:   0.15s ease-out;
 
 @toggle-md-height:                      24px;
 @toggle-md-handle-gap:                  3px;
@@ -393,7 +393,7 @@
 
 // Navs
 
-@nav-item-transition:             color 0.3s linear, background-color 0.3s linear;
+@nav-item-transition:             color 0.15s ease-out, background-color 0.15s ease-out;
 
 // Tab
 @nav-tab-bar-width:               1px;
@@ -432,7 +432,7 @@
 @sidenav-icon-spacing:                  20px;
 @sidenav-icon-width:                    @sidenav-level1-item-font-size;
 @sidenav-dropdown-toggle-caret-width:   20px;
-@sidenav-collapse-transition-config:     0.2s ease-in;
+@sidenav-collapse-transition-config:     0.15s ease-in;
 
 @sidenav-level-retract:                 9px;
 @sidenav-level2-retract:                (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
@@ -648,7 +648,7 @@
 @panel-padding:                 20px;
 @panel-header-font-size:        16px;
 @panel-split-line-color:        @dropdown-divider-bg;
-@panel-accodion-transition:     0.3s linear;
+@panel-accodion-transition:     0.15s linear;
 @panel-box-shadow:              @box-shadow;
 
 // Timeline
@@ -717,7 +717,6 @@
 
 @picker-item-content-padding-vertical:    8px;
 @picker-item-content-padding-horizontal:  @picker-menu-padding;
-@picker-item-transition:                  color 0.3s linear, background-color 0.3s linear;
 
 // group title
 @picker-group-children-padding-left:    26px;
@@ -806,7 +805,7 @@
 @slider-calibration-diameter:         8px;
 @slider-calibration-border-width:     2px;
 @slider-mark-margin-top:              9px;
-@slider-handle-transition:            0.3s ease-in-out;
+@slider-handle-transition:            0.15s ease-in-out;
 
 // Breadcrumbs