feat(Select): 添加动画 (#1799)

Author: xingyan95

packages/devui-vue/devui/select/src/select.scss

@@ -39,6 +39,7 @@ $select-item-min-height: 36px;
 
   .#{$devui-prefix}-tag {
     margin: 4px 0 4px 4px;
+
     .#{$devui-prefix}-tag__item.#{$devui-prefix}-tag--md {
       height: 18px;
       line-height: 16px;
@@ -51,6 +52,7 @@ $select-item-min-height: 36px;
 
   &--sm {
     font-size: $devui-font-size-sm;
+
     .#{$devui-prefix}-tag {
       margin: 2px 0 2px 4px;
 
@@ -151,6 +153,7 @@ $select-item-min-height: 36px;
   flex-wrap: wrap;
   padding-right: 28px;
   cursor: pointer;
+
   .#{$devui-prefix}-select__multiple--input {
     display: flex;
     max-width: 100%;
@@ -330,20 +333,6 @@ $select-item-min-height: 36px;
   }
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transform: scale3d(0, 1, 0, 0.9999) translate3d(0, 1, 0, 0);
-  transform-origin: 0 0%;
-  opacity: 1;
-  transition: transform, opacity $transition-base-time ease-out;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  transform: scale3d(0, 1, 0, 0) translate3d(0, 1, 0, -4px);
-  opacity: 0;
-  transition: transform, opacity $transition-base-time ease-in;
-}
 .#{$devui-prefix}-select__dropdown--empty {
   text-align: center;
   font-size: $select-item-font-size;
@@ -377,3 +366,49 @@ $select-item-min-height: 36px;
     color: $devui-aide-text;
   }
 }
+
+.fade {
+  &-bottom {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(-4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+
+  &-top {
+    &-enter-from,
+    &-leave-to {
+      opacity: 0.8;
+      transform: scaleY(0.8) translateY(4px);
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+      transform: scaleY(0.9999) translateY(0);
+    }
+
+    &-enter-active {
+      transition: transform 0.2s cubic-bezier(0.16, 0.75, 0.5, 1), opacity 0.2s cubic-bezier(0.16, 0.75, 0.5, 1);
+    }
+
+    &-leave-active {
+      transition: transform 0.2s cubic-bezier(0.5, 0, 0.84, 0.25), opacity 0.2s cubic-bezier(0.5, 0, 0.84, 0.25);
+    }
+  }
+}

packages/devui-vue/devui/select/src/select.tsx

@@ -12,6 +12,7 @@ import {
   withModifiers,
   onUnmounted,
   nextTick,
+  computed
 } from 'vue';
 import type { SetupContext } from 'vue';
 import useSelect from './use-select';
@@ -72,9 +73,18 @@ export default defineComponent({
     const dropdownEmptyCls = ns.em('dropdown', 'empty');
     ctx.expose({ focus, blur, toggleChange });
     const isRender = ref<boolean>(false);
+    const currentPosition = ref('bottom');
     const position = ref<Placement[]>(['bottom-start', 'top-start']);
     const dropdownWidth = ref('0');
 
+    const handlePositionChange = (pos: string) => {
+      currentPosition.value = pos.split('-')[0] === 'top' ? 'top' : 'bottom';
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === 'top' ? '0% 100%' : '0% 0%',
+      'z-index': 'var(--devui-z-index-dropdown, 1052)'
+    }));
+
     const updateDropdownWidth = () => {
       dropdownWidth.value = originRef?.value?.clientWidth ? originRef.value.clientWidth + 'px' : '100%';
     };
@@ -134,19 +144,18 @@ export default defineComponent({
           }, ['stop'])}>
           <SelectContent ref={selectRef}></SelectContent>
           <Teleport to="body">
-            <Transition name="fade">
+            <Transition name={`fade-${currentPosition.value}`}>
               <FlexibleOverlay
+                v-show={isOpen.value}
                 v-model={isRender.value}
                 ref={dropdownRef}
                 origin={originRef.value}
                 align="start"
                 offset={4}
                 position={position.value}
-                style={{
-                  visibility: isOpen.value ? 'visible' : 'hidden',
-                  'z-index': isOpen.value ? 'var(--devui-z-index-dropdown, 1052)' : -1,
-                }}>
-                <div class={dropdownCls} style={{ width: `${dropdownWidth.value}`, visibility: isOpen.value ? 'visible' : 'hidden' }}>
+                onPositionChange={handlePositionChange}
+                style={styles.value}>
+                <div class={dropdownCls} style={{ width: `${dropdownWidth.value}` }}>
                   <ul class={listCls} v-show={!isLoading.value} ref={dropdownContainer}>
                     {isShowCreateOption.value && (
                       <Option value={filterQuery.value} name={filterQuery.value} create>