refactor(RelatedPrompt): transition css false

empathyco · Jan 28, 2025 · ad6476c · ad6476c
1 parent f022009
commit ad6476c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 36 deletions.
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -392,11 +392,7 @@
                             <RelatedPromptsTagList
                               :button-class="'x-button-lead x-button-circle x-button-ghost x-p-0'"
                               :related-prompt-class="'x-p-20 x-rounded-xl x-w-[300px] x-max-w-[400px] x-gap-8'"
-                              :related-prompt-color-classes="[
-                                'x-bg-amber-300',
-                                'x-bg-amber-400',
-                                'x-bg-amber-500'
-                              ]"
+                              :tag-colors="['x-bg-amber-300', 'x-bg-amber-400', 'x-bg-amber-500']"
                               class="-x-mb-1 x-mt-24 desktop:x-mt-0 x-p-0 x-h-[70px]"
                             />
                             <QueryPreviewList

diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompts-tag-list.vue
@@ -13,10 +13,10 @@
       <slot name="sliding-panel-left-button" />
     </template>
     <transition-group
-      @after-enter="onAfterEnter"
-      @before-leave="onBeforeLeave"
-      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @leave="onLeave"
       class="x-flex x-gap-16 x-min-w-full"
+      :css="false"
       tag="div"
     >
       <RelatedPrompt
@@ -29,6 +29,7 @@
         class="x-h-full"
         :class="[relatedPromptClass, colorClass]"
         :data-index="index"
+        :disabled="isAnimating"
       >
         <template #extra-content>
           <slot name="related-prompt-extra-content" v-bind="{ relatedPrompt }" />
@@ -48,6 +49,7 @@
   import { relatedPromptsXModule } from '../x-module';
   import { use$x, useState } from '../../../composables';
   import RelatedPrompt from './related-prompt.vue';
+  import { Fn } from '@vueuse/core';
 
   export default defineComponent({
     name: 'RelatedPromptsTagList',
@@ -78,6 +80,7 @@
       );
       const initialOffsetLefts: Record<number, number> = {};
 
+      const isAnimating = ref(false);
       const singleAnimationDurationInMs = computed(
         () => props.animationDurationInMs / (relatedPrompts.value.length - 1)
       );
@@ -103,9 +106,9 @@
         if (timeOutId) {
           clearTimeout(timeOutId);
         }
-
+        isAnimating.value = true;
         timeOutId = +setTimeout(() => {
-          console.log('reset', Date.now());
+          isAnimating.value = false;
 
           relatedPromptElements.value.forEach(element => {
             Object.keys(element.style).forEach(property => {
@@ -117,7 +120,6 @@
 
       const onSelect = (selectedIndex: number): void => {
         resetRelatedPromptsStyle();
-        console.log('click', Date.now());
 
         const selected = relatedPromptElements.value.find(
           element => Number.parseInt(element.getAttribute('data-index')!) === selectedIndex
@@ -157,24 +159,7 @@
         x.emit('UserSelectedARelatedPrompt', selectedIndex);
       };
 
-      const onAfterEnter = (el: Element) => {
-        const element = el as HTMLElement;
-        element.style.opacity = '1';
-        element.style.top = '0px';
-      };
-
-      const onBeforeLeave = (el: Element) => {
-        const element = el as HTMLElement;
-        element.style.transitionDelay = `${
-          (relatedPrompts.value.length - relatedPromptComponents.value.length - 1) *
-          singleAnimationDurationInMs.value
-        }ms`;
-        element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
-        element.style.opacity = '0';
-        element.style.top = '5px';
-      };
-
-      const onBeforeEnter = (el: Element) => {
+      const onEnter = (el: Element, done: Fn) => {
         const element = el as HTMLElement;
         const selectedIndex = Number.parseInt(
           relatedPromptElements.value[0].getAttribute('data-index')!
@@ -188,28 +173,49 @@
         console.log(
           'Delay',
           index,
-          (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value,
-          Date.now()
+          (index < selectedIndex ? index : index - 1) * singleAnimationDurationInMs.value
         );
 
         element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
         element.style.position = 'absolute';
         element.style.left = `${initialOffsetLefts[index]}px`;
-        element.style.top = '5px';
         element.style.opacity = '0';
+        element.style.top = '5px';
+        requestAnimationFrame(() => {
+          element.style.opacity = '1';
+          element.style.top = '0px';
+          done();
+        });
+      };
+
+      const onLeave = (el: Element, done: Fn) => {
+        const element = el as HTMLElement;
+        element.style.transitionDelay = `${
+          (relatedPrompts.value.length - relatedPromptComponents.value.length - 1) *
+          singleAnimationDurationInMs.value
+        }ms`;
+        element.style.transitionDuration = `${singleAnimationDurationInMs.value}ms`;
+
+        requestAnimationFrame(() => {
+          element.style.opacity = '0';
+          element.style.top = '5px';
+        });
+        setTimeout(() => {
+          done();
+        }, props.animationDurationInMs);
       };
 
       const isSelected = (index: number): boolean => selectedPromptIndex.value === index;
 
       return {
         isSelected,
         onSelect,
-        onAfterEnter,
-        onBeforeLeave,
-        onBeforeEnter,
+        onEnter,
+        onLeave,
         selectedPromptIndex,
         visibleRelatedPrompts,
-        relatedPromptComponents
+        relatedPromptComponents,
+        isAnimating
       };
     }
   });