refactor: use ghost animation instead separate list

fixes #24

Author: vad1ym

example/interactive-demo/Actions.vue

@@ -35,7 +35,7 @@ defineEmits<Emits>()
         Anim. reset
       </button>
     </div>
-    <div class="flex justify-center gap-4">
+    <div class="flex justify-center gap-1">
       <button
         class="btn btn-circle btn-error"
         :disabled="isEnd && !loop"

src/FlashCard.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { DragPosition, DragSetupParams } from './utils/useDragSetup'
-import { onMounted, useTemplateRef, watch } from 'vue'
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue'
 import ApproveIcon from './components/icons/ApproveIcon.vue'
 import RejectIcon from './components/icons/RejectIcon.vue'
 import { SwipeAction, useDragSetup } from './utils/useDragSetup'
+import { useGhostAnimation } from './utils/useGhostAnimation'
 
 export interface FlashCardProps extends DragSetupParams {
   // Completely disable dragging feature
@@ -117,10 +118,56 @@ watch(() => params.disableDrag, () => {
   setupInteract()
 })
 
+// Ghost animation composable
+const { isAnimating: isGhostAnimating, createGhost, cleanup: cleanupGhost } = useGhostAnimation(el)
+
+// Helper to trigger ghost animation
+function triggerGhostAnimation() {
+  if (!animation || !el.value)
+    return
+
+  requestAnimationFrame(() => {
+    createGhost(
+      {
+        animationType: animation.type,
+        isRestoring: animation.isRestoring,
+        swipeDirection: params.swipeDirection,
+        initialPosition: animation.initialPosition,
+        getTransformStyle,
+      },
+      () => emit('animationend'),
+    )
+  })
+}
+
+// Watch for animation prop changes (serialize to detect deep changes)
+watch(() => JSON.stringify(animation), (newAnimationStr, oldAnimationStr) => {
+  // Skip if element is not mounted yet
+  if (!el.value) {
+    return
+  }
+
+  // If animation changed to a new one while old is still running, cleanup first
+  if (oldAnimationStr && newAnimationStr && oldAnimationStr !== newAnimationStr) {
+    cleanupGhost()
+  }
+
+  triggerGhostAnimation()
+})
+
 onMounted(() => {
   if (el.value?.offsetHeight) {
     emit('mounted', el.value?.offsetHeight)
   }
+
+  // If animation is set, trigger ghost creation after mount
+  if (animation) {
+    triggerGhostAnimation()
+  }
+})
+
+onBeforeUnmount(() => {
+  cleanupGhost()
 })
 
 defineExpose({
@@ -135,17 +182,12 @@ defineExpose({
     :class="{
       'flash-card--dragging': isDragging,
       'flash-card--drag-disabled': params.disableDrag,
+      'flash-card--hidden': isGhostAnimating,
     }"
     :style="{ transform: `translate3D(${position.x}px, ${position.y}px, 0)` }"
   >
     <div
       class="flash-card__animation-wrapper"
-      :class="{
-        [`flash-card-animation--${animation?.type}`]: animation?.type,
-        [`flash-card-animation--${animation?.type}-restore`]: animation?.isRestoring,
-        [`flash-card-animation--${params.swipeDirection}`]: animation?.type,
-      }"
-      @animationend="emit('animationend')"
     >
       <div class="flash-card__transform" :style="getTransformStyle(position)">
         <slot :is-dragging="isDragging" />
@@ -199,6 +241,10 @@ defineExpose({
   pointer-events: none;
 }
 
+.flash-card--hidden {
+  visibility: hidden;
+}
+
 /* Base animations (horizontal by default) */
 .flash-card-animation--approve { animation: approve-horizontal 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
 .flash-card-animation--reject { animation: reject-horizontal 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
@@ -218,14 +264,14 @@ defineExpose({
 .flash-card-animation--vertical.flash-card-animation--reject-restore { animation: restore-reject-vertical 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
 
 /* Horizontal keyframes */
-@keyframes approve-horizontal { 0%{opacity:1;} 100%{transform:translateX(320px) rotate(15deg);opacity:0;} }
-@keyframes reject-horizontal { 0%{opacity:1;} 100%{transform:translateX(-320px) rotate(-15deg);opacity:0;} }
-@keyframes restore-approve-horizontal { 0%{transform:translateX(320px) rotate(15deg);opacity:0;} 100%{transform:translateX(0) rotate(0deg);opacity:1;} }
-@keyframes restore-reject-horizontal { 0%{transform:translateX(-320px) rotate(-15deg);opacity:0;} 100%{transform:translateX(0) rotate(0deg);opacity:1;} }
+@keyframes approve-horizontal { to {transform:translateX(320px) rotate(15deg);opacity:0;} }
+@keyframes reject-horizontal { to {transform:translateX(-320px) rotate(-15deg);opacity:0;} }
+@keyframes restore-approve-horizontal { from {transform:translateX(320px) rotate(15deg);opacity:0;} to {transform:translateX(0) rotate(0deg);opacity:1;} }
+@keyframes restore-reject-horizontal { from {transform:translateX(-320px) rotate(-15deg);opacity:0;} to {transform:translateX(0) rotate(0deg);opacity:1;} }
 
 /* Vertical keyframes */
-@keyframes approve-vertical { 0%{opacity:1;} 100%{transform:translateY(-320px);opacity:0;} }
-@keyframes reject-vertical { 0%{opacity:1;} 100%{transform:translateY(320px);opacity:0;} }
-@keyframes restore-approve-vertical { 0%{transform:translateY(-320px);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
-@keyframes restore-reject-vertical { 0%{transform:translateY(320px);opacity:0;} 100%{transform:translateY(0);opacity:1;} }
+@keyframes approve-vertical { to {transform:translateY(-320px);opacity:0;} }
+@keyframes reject-vertical { to {transform:translateY(320px);opacity:0;} }
+@keyframes restore-approve-vertical { from {transform:translateY(-320px);opacity:0;} to {transform:translateY(0);opacity:1;} }
+@keyframes restore-reject-vertical { from {transform:translateY(320px);opacity:0;} to {transform:translateY(0);opacity:1;} }
 </style>

src/FlashCards.vue

@@ -209,54 +209,33 @@ defineExpose({
           No more cards!
         </slot>
       </div>
-      <!-- Обычные карточки стека -->
+      <!-- Unified card list - single v-for -->
       <div
-        v-for="({ item, itemId }, domIndex) in stackList"
-        :key="`stack-${itemId}`"
+        v-for="({ item, itemId, stackIndex, isAnimating, animation }, domIndex) in stackList"
+        :key="`card-${itemId}`"
         :data-item-id="itemId"
         class="flashcards__card-wrapper"
+        :class="{ 'flashcards__card-wrapper--animating': isAnimating }"
         :style="[
-          { zIndex: stackList.length - domIndex },
-          getCardStyle(domIndex + cardsInTransition.filter(c =>
-            c.animation?.isRestoring,
-          ).length),
+          {
+            zIndex: isAnimating
+              ? stackList.length * 2 + domIndex
+              : stackList.length - domIndex,
+          },
+          getCardStyle(stackIndex),
         ]"
       >
         <FlashCard
           v-bind="props"
           class="flashcards__card"
-          :class="{ 'flashcards__card--active': itemId === currentItemId }"
-          :disable-drag="isDragDisabled"
+          :class="{
+            'flashcards__card--active': itemId === currentItemId && !isAnimating,
+            'flashcards__card--animating': isAnimating,
+          }"
+          :animation="isAnimating ? animation : undefined"
+          :disable-drag="isDragDisabled || isAnimating"
           @complete="(action, pos) => handleCardSwipe(itemId, action, pos)"
           @mounted="containerHeight = Math.max($event, 0)"
-          @dragstart="emit('dragstart', item)"
-          @dragmove="(type, delta) => emit('dragmove', item, type, delta)"
-          @dragend="emit('dragend', item)"
-        >
-          <template #default>
-            <slot :item="item" :active-item-key="currentItemId" />
-          </template>
-          <template #reject="{ delta }">
-            <slot name="reject" :item="item" :delta="delta" />
-          </template>
-          <template #approve="{ delta }">
-            <slot name="approve" :item="item" :delta="delta" />
-          </template>
-        </FlashCard>
-      </div>
-
-      <!-- Animating cards -->
-      <div
-        v-for="({ item, itemId, animation }, domIndex) in cardsInTransition"
-        :key="`anim-${itemId}`"
-        :data-item-id="itemId"
-        class="flashcards__card-wrapper flashcards__card-wrapper--animating"
-        :style="[{ zIndex: stackList.length * 2 + domIndex }, getCardStyle(cardsInTransition.length - domIndex - 1)]"
-      >
-        <FlashCard
-          v-bind="props"
-          class="flashcards__card flashcards__card--animating"
-          :animation="animation"
           @animationend="() => removeAnimatingCard(itemId)"
           @dragstart="emit('dragstart', item)"
           @dragmove="(type, delta) => emit('dragmove', item, type, delta)"

src/utils/useGhostAnimation.ts

@@ -0,0 +1,182 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+
+export interface GhostAnimationOptions {
+  /**
+   * Element to clone
+   */
+  element: HTMLElement
+
+  /**
+   * Animation type (approve/reject)
+   */
+  animationType: string
+
+  /**
+   * Whether this is a restore animation
+   */
+  isRestoring: boolean
+
+  /**
+   * Swipe direction for animation classes
+   */
+  swipeDirection?: string
+
+  /**
+   * Initial position from drag (optional)
+   */
+  initialPosition?: {
+    x: number
+    y: number
+  }
+
+  /**
+   * Function to get transform style based on position
+   */
+  getTransformStyle?: (position: { x: number, y: number, delta: number, type: any }) => string | null
+
+  /**
+   * Callback when animation ends
+   */
+  onAnimationEnd: () => void
+}
+
+/**
+ * Creates and manages a ghost clone for animations
+ */
+export function createGhostElement(options: GhostAnimationOptions): HTMLElement {
+  const {
+    element,
+    animationType,
+    isRestoring,
+    swipeDirection,
+    initialPosition,
+    getTransformStyle,
+    onAnimationEnd,
+  } = options
+
+  // Clone the card element
+  const clone = element.cloneNode(true) as HTMLElement
+  clone.classList.add('flash-card--ghost')
+  clone.style.pointerEvents = 'none'
+
+  // Get current position from the card
+  const rect = element.getBoundingClientRect()
+
+  // Position ghost exactly over original
+  clone.style.position = 'fixed'
+  clone.style.top = `${rect.top}px`
+  clone.style.left = `${rect.left}px`
+  clone.style.width = `${rect.width}px`
+  clone.style.height = `${rect.height}px`
+  clone.style.zIndex = '9999'
+  clone.style.transform = 'none'
+
+  // Get animation wrapper
+  const animationWrapper = clone.querySelector('.flash-card__animation-wrapper') as HTMLElement
+  const transformWrapper = animationWrapper?.querySelector('.flash-card__transform') as HTMLElement
+
+  // Apply initial position if provided (for drag animations)
+  if (initialPosition && !isRestoring && animationWrapper && transformWrapper) {
+    clone.style.top = `${rect.top - initialPosition.y}px`
+    clone.style.left = `${rect.left - initialPosition.x}px`
+    animationWrapper.style.transform = `translate3d(${initialPosition.x}px, ${initialPosition.y}px, 0)`
+  }
+
+  // Always apply current transform style to ghost if available
+  if (animationWrapper && transformWrapper) {
+    // First, copy the current computed transform from the original element
+    const originalTransformWrapper = element.querySelector('.flash-card__transform') as HTMLElement
+    if (originalTransformWrapper) {
+      const computedStyle = window.getComputedStyle(originalTransformWrapper)
+      const currentTransform = computedStyle.transform
+      if (currentTransform && currentTransform !== 'none') {
+        transformWrapper.style.transform = currentTransform
+      }
+    }
+
+    // Then apply additional transform style if provided
+    if (getTransformStyle) {
+      const rotationStyle = getTransformStyle({ x: 0, y: 0, delta: 0, type: null, ...initialPosition })
+      if (rotationStyle) {
+        // Extract transform value from rotationStyle and apply it
+        const transformMatch = rotationStyle.match(/transform:\s*([^;]+)/)
+        if (transformMatch) {
+          transformWrapper.style.transform = transformMatch[1]
+        }
+      }
+    }
+  }
+
+  // Insert into document
+  document.body.appendChild(clone)
+
+  // Force reflow
+  void clone.offsetHeight
+
+  // Apply animation classes
+  if (animationWrapper) {
+    animationWrapper.classList.add(`flash-card-animation--${animationType}`)
+    if (isRestoring) {
+      animationWrapper.classList.add(`flash-card-animation--${animationType}-restore`)
+    }
+    if (swipeDirection) {
+      animationWrapper.classList.add(`flash-card-animation--${swipeDirection}`)
+    }
+  }
+
+  // Listen for animation end
+  const handleAnimationEnd = (e: AnimationEvent) => {
+    if (e.target !== animationWrapper)
+      return
+
+    clone.removeEventListener('animationend', handleAnimationEnd)
+    onAnimationEnd()
+  }
+
+  clone.addEventListener('animationend', handleAnimationEnd)
+
+  return clone
+}
+
+/**
+ * Composable for managing ghost animations
+ */
+export function useGhostAnimation(elementRef: Ref<HTMLElement | null | undefined>) {
+  const ghostElement = ref<HTMLElement | null>(null)
+  const isAnimating = ref(false)
+
+  function cleanup() {
+    ghostElement.value?.remove()
+    ghostElement.value = null
+    isAnimating.value = false
+  }
+
+  function createGhost(options: Omit<GhostAnimationOptions, 'element' | 'onAnimationEnd'>, onAnimationEnd: () => void) {
+    if (!elementRef.value)
+      return
+
+    // Cleanup existing ghost
+    if (ghostElement.value) {
+      cleanup()
+    }
+
+    ghostElement.value = createGhostElement({
+      ...options,
+      element: elementRef.value,
+      onAnimationEnd: () => {
+        cleanup()
+        onAnimationEnd()
+      },
+    })
+
+    isAnimating.value = true
+  }
+
+  return {
+    ghostElement,
+    isAnimating,
+    createGhost,
+    cleanup,
+  }
+}