feat: 一些组件的动效

WeBankFinTech · Jan 21, 2022 · 7c6f6cd · 7c6f6cd
1 parent 8ca320b
commit 7c6f6cd
Show file tree

Hide file tree

Showing 16 changed files with 102 additions and 45 deletions.
diff --git a/components/cascader-panel/style/index.less b/components/cascader-panel/style/index.less
@@ -50,24 +50,28 @@
         line-height: @select-height;
         background-color: var(--f-cascader-node-bg-color);
         outline: none;
+        transition: background-color @animation-duration-slow @ease-base-out;
 
         &:hover, &:focus {
             --f-cascader-node-bg-color: @select-option-hover-color;
+            transition: background-color @animation-duration-fast @ease-base-in;
         }
 
         &.is-disabled {
             --f-cascader-node-color: var(--f-text-color-disabled);
             --f-cascader-node-bg-color: var(--f-width);
             cursor: not-allowed;
+            transition: background-color @animation-duration-fast @ease-base-in;
         }
         &.is-checked {
             --f-cascader-node-color: var(--f-primary-color);
             font-weight: @font-weight-medium;
+            transition: background-color @animation-duration-fast @ease-base-in;
         }
         &.in-active-path {
             --f-cascader-node-color: var(--f-primary-color);
             --f-cascader-node-bg-color: @select-option-hover-color;
-
+            transition: background-color @animation-duration-fast @ease-base-in;
             &.is-disabled {
                 opacity: 0.5;
             }

diff --git a/components/checkbox/style/index.less b/components/checkbox/style/index.less
@@ -33,7 +33,7 @@
         border: var(--f-border-width-base) var(--f-border-style-base) transparent;
         border-color: var(--f-checkbox-border-color);
         border-radius: var(--f-border-radius-sm);
-        transition: all @animation-duration-base @ease-base-in;
+        transition: all @animation-duration-slow @ease-base-out;
     }
     &-content{
         display: inline-block;
@@ -42,14 +42,14 @@
     &.is-hover{
         .@{checkbox-prefix-cls}-inner {
             --f-checkbox-border-color: var(--f-primary-color);
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: all @animation-duration-base @ease-base-in;
         }
     }
     &.is-checked{
         .@{checkbox-prefix-cls}-inner {
             --f-checkbox-bg-color: var(--f-primary-color);
             --f-checkbox-border-color: var(--f-primary-color);
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: all @animation-duration-base @ease-base-in;
             &::before {
                 .checkbox-inner()
             }

diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
@@ -114,6 +114,7 @@
     &-date-on {
         background-color: var(--f-hover-color-light);
         border-radius: 0;
+        transition: all @animation-duration-base @ease-base-in;
         &::before {
             position: absolute;
             left: -4px;
@@ -146,6 +147,7 @@
         color: var(--f-white);
         font-weight: @font-weight-medium;
         background: var(--f-primary-color);
+        transition: all @animation-duration-base @ease-base-in;
         &:hover {
             color: var(--f-white);
             font-weight: @font-weight-medium;

diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -34,7 +34,7 @@
         line-height: @dropdown-option-height;
         background: var(--f-white);
         cursor: pointer;
-        transition: all @animation-duration-base @ease-base-in;
+        transition: background-color @animation-duration-slow @ease-base-out;
         &-label {
             flex: auto;
         }
@@ -46,6 +46,7 @@
         }
         &:hover {
             background: @dropdown-option-hover-color;
+            transition: background-color @animation-duration-fast @ease-base-in;
         }
         &.is-disabled {
             color: var(--f-text-color-disabled);

diff --git a/components/form/formItem.vue b/components/form/formItem.vue
@@ -11,9 +11,11 @@
         </label>
         <div :class="`${prefixCls}-content`">
             <slot />
-            <div v-if="formItemShowMessage" :class="`${prefixCls}-error`">
-                {{ validateMessage }}
-            </div>
+            <Transition name="fes-fade">
+                <div v-if="formItemShowMessage" :class="`${prefixCls}-error`">
+                    {{ validateMessage }}
+                </div>
+            </Transition>
         </div>
     </div>
 </template>

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -98,19 +98,20 @@
 
     // formItem 错误样式 
     .@{form-item-cls}.@{form-item-error} {
-        .@{form-item-error-cls} {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            padding-top: 5px;
-            color: var(--f-danger-color);
-            font-size: @form-size-error;
-            line-height: 1;
-        }
-        .wd-input-inner,
-        .wd-textarea-inner,
-        .wd-select-trigger {
+        .fes-input-inner,
+        .fes-textarea-inner,
+        .fes-select-trigger {
             border-color: var(--f-danger-color);
         }
     }
+}
+
+.@{form-item-error-cls} {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    padding-top: 5px;
+    color: var(--f-danger-color);
+    font-size: @form-size-error;
+    line-height: 1;
 }
diff --git a/components/input/style/index.less b/components/input/style/index.less
@@ -30,7 +30,7 @@
         border: var(--f-border-base);
         border-radius: var(--f-border-radius-base);
         outline: 0;
-        transition: all @animation-duration-base @ease-base-in;
+        transition: all @animation-duration-slow @ease-base-out;
 
         &::placeholder {
             color: var(--f-text-color-caption);
@@ -40,11 +40,11 @@
         &:focus {
             z-index: 1;
             border-color: var(--f-primary-color);
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: all @animation-duration-base @ease-base-in;
         }
         &:focus {
             box-shadow: 0 0 0 2px var(--f-focus-shadow-color);
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: all @animation-duration-base @ease-base-in;
         }
 
         &[disabled] {

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
@@ -40,7 +40,7 @@
                 width: 100%;
                 padding: 0 @padding-sm;
                 color: var(--f-sub-menu-wrapper-color);
-                transition: all @animation-duration-base @ease-base-in;
+                transition: all @animation-duration-slow @ease-base-out;
             }
             &-icon {
                 display: flex;
@@ -51,7 +51,6 @@
                 display: flex;
                 align-items: center;
                 margin-left: @padding-xs;
-                transition: transform @animation-duration-fast @ease-base-in;
                 &.is-opened {
                     transform: rotate(180deg);
                 }
@@ -92,7 +91,7 @@
             &.is-active {
                 > .@{sub-menu-prefix-cls}-wrapper {
                     --f-sub-menu-wrapper-color: var(--f-primary-color);
-                    transition: all @animation-duration-slow @ease-base-out;
+                    transition: all @animation-duration-base @ease-base-in;
                 }
             }
         }
@@ -107,7 +106,7 @@
                 width: 100%;
                 padding: 0 @padding-sm;
                 color: var(--f-menu-item-wrapper-color);
-                transition: all @animation-duration-base @ease-base-in;
+                transition: all @animation-duration-slow @ease-base-out;
             }
             &-icon {
                 display: flex;
@@ -122,7 +121,7 @@
             &.is-active {
                 > .@{menu-item-prefix-cls}-wrapper {
                     --f-menu-item-wrapper-color: var(--f-primary-color);
-                    transition: all @animation-duration-slow @ease-base-out;
+                    transition: all @animation-duration-base @ease-base-in;
                 }
             }
         }

diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
@@ -59,6 +59,7 @@
             --f-pager-item-height: @pagination-height-base;
             --f-pager-item-line-height: @pagination-pager-line-height-base;
             --f-pager-item-border-radius: var(--f-border-radius-base);
+            transition: all @animation-duration-slow @ease-base-out;
 
             .flex-box();
             justify-content: center;
@@ -79,12 +80,14 @@
                 --f-pager-item-color: var(--f-primary-color);
                 --f-pager-item-bg-color: var(--f-hover-color-ligh);
                 --f-pager-item-border-color: var(--f-primary-color);  
+                transition: all @animation-duration-base @ease-base-in;
             }
 
             &.is-active {
                 --f-pager-item-color: var(--f-white);
                 --f-pager-item-bg-color: var(--f-primary-color);
                 --f-pager-item-border-color: var(--f-primary-color);
+                transition: all @animation-duration-base @ease-base-in;
                 &:hover {
                     --f-pager-item-bg-color: var(--f-hover-color-base);
                     --f-pager-item-border-color: var(--f-hover-color-base); 

diff --git a/components/radio/style/index.less b/components/radio/style/index.less
@@ -30,7 +30,7 @@
         background: var(--f-white);
         border: var(--f-border-base);
         border-radius: 100%;
-        transition: all @animation-duration-base @ease-base-in;
+        transition: all @animation-duration-slow @ease-base-out;
     }
     &-content{
         display: inline-block;
@@ -39,14 +39,14 @@
     &.is-hover{
         .@{radio-prefix-cls}-inner {
             border-color: var(--f-primary-color);
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: all @animation-duration-base @ease-base-in;
         }
     }
     &.is-checked{
         .@{radio-prefix-cls}-inner {
             background: var(--f-primary-color);
             border-color: var(--f-primary-color);
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: all @animation-duration-base @ease-base-in;
             &::before {
                 .radio-inner()
             }

diff --git a/components/select-trigger/style/index.less b/components/select-trigger/style/index.less
@@ -23,15 +23,15 @@
     border-color: var(--f-select-trigger-border-color);
     border-radius: var(--f-border-radius-base);
     outline: 0;
-    transition: all @animation-duration-base @ease-base-in;
+    transition: all @animation-duration-slow @ease-base-out;
     &:hover {
         --f-select-trigger-border-color: var(--f-primary-color);
-        transition: all @animation-duration-slow @ease-base-out;
+        transition: all @animation-duration-base @ease-base-in;
     }
     &.is-active {
         --f-select-trigger-border-color: var(--f-primary-color);
         box-shadow: 0 0 0 2px var(--f-focus-shadow-color);
-        transition: all @animation-duration-slow @ease-base-out;
+        transition: all @animation-duration-base @ease-base-in;
     }
     &.is-disabled {
         --f-select-trigger-border-color: var(--f-border-color-base);

diff --git a/components/select/style/index.less b/components/select/style/index.less
@@ -45,7 +45,7 @@
         line-height: @select-height;
         background: var(--f-white);
         cursor: pointer;
-        transition: all @animation-duration-fast @ease-base-in;
+        transition: background-color @animation-duration-slow @ease-base-out;
         &-label {
             flex: auto;
         }
@@ -55,7 +55,7 @@
         }
         &:hover {
             background: @select-option-hover-color;
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: background-color @animation-duration-fast @ease-base-in;
         }
         &.is-disabled {
             color: var(--f-text-color-disabled);
@@ -65,7 +65,7 @@
         &.is-checked {
             color: var(--f-primary-color);
             background: @select-option-hover-color;
-            transition: all @animation-duration-slow @ease-base-out;
+            transition: background-color @animation-duration-fast @ease-base-in;
         }
     }
 }
diff --git a/components/steps/style/index.less b/components/steps/style/index.less
@@ -58,6 +58,7 @@
     align-items: flex-start;
     overflow: hidden;
     vertical-align: top;
+    transition: all @animation-duration-base @ease-base-in;
     &-symbol {
         &-wrapper {
             --f-step-symbol-wrapper-color: inherit;
@@ -71,6 +72,7 @@
             border-color: var(--f-step-symbol-wrapper-border-color);
             border-radius: 50%;
             .square(@step-symbol-size);
+            transition: all @animation-duration-base @ease-base-in;
         }
     }
     &-content {
@@ -105,7 +107,6 @@
         .@{step-prefix-cls}-symbol {
             .@{step-prefix-cls}-symbol-wrapper {
                 --f-step-symbol-wrapper-color: var(--f-text-color-secondary);
-                // --f-step-symbol-wrapper-line-height: (@step-symbol-size - 2px);
                 --f-step-symbol-wrapper-border-color: var(--f-border-color-base);
             }
         }
@@ -114,9 +115,7 @@
         .@{step-prefix-cls}-symbol {
             .@{step-prefix-cls}-symbol-wrapper {
                 background: var(--f-primary-color);
-
                 --f-step-symbol-wrapper-color: var(--f-white);
-                // --f-step-symbol-wrapper-line-height: (@step-symbol-size - 2px);
                 --f-step-symbol-wrapper-border-color: var(--f-primary-color);
             }
         }
@@ -129,7 +128,6 @@
         .@{step-prefix-cls}-symbol {
             .@{step-prefix-cls}-symbol-wrapper {
                 --f-step-symbol-wrapper-color: var(--f-primary-color);
-                // --f-step-symbol-wrapper-line-height: (@step-symbol-size - 2px);
                 --f-step-symbol-wrapper-border-color: var(--f-primary-color);
             }
         }
@@ -142,7 +140,6 @@
         .@{step-prefix-cls}-symbol {
             .@{step-prefix-cls}-symbol-wrapper {
                 --f-step-symbol-wrapper-color: var(--f-danger-color);
-                // --f-step-symbol-wrapper-line-height: (@step-symbol-size - 2px);
                 --f-step-symbol-wrapper-border-color: var(--f-danger-color);
             }
         }

diff --git a/components/style/core/motion.less b/components/style/core/motion.less
@@ -1,2 +1,3 @@
 @import './motion/other.less';
-@import './motion/slide.less';
+@import './motion/slide.less';
+@import './motion/fade.less';
diff --git a/components/style/core/motion/fade.less b/components/style/core/motion/fade.less
@@ -0,0 +1,17 @@
+
+.fade-motion() {
+    @name: ~'@{cls-prefix}-fade';
+    .@{name}-enter-from {
+        opacity: 0;
+    }
+    .@{name}-enter-active {
+        transition: opacity @animation-duration-base @ease-base-in;
+    }
+    .@{name}-leave-active {
+        transition: opacity @animation-duration-base @ease-base-in;
+    }
+    .@{name}-leave-to {
+        opacity: 0;
+    }
+}
+.fade-motion();