add: new design (wip)

New design as WIP, swipe controls

app/components/Pp/PriceCard.vue

@@ -11,7 +11,8 @@
     <div
       ref="top"
       class="top flex-col"
-      :style="{ left, transition }"
+      :class="{ 'animated' : !isSwiping }"
+      :style="{ left }"
     >
       <header>
         <div class="name-price">
@@ -68,14 +69,13 @@ const emit = defineEmits(['remove', 'update'])
 
 const top = useTemplateRef('top')
 const left = shallowRef<string>('0')
-const transition = shallowRef<string>('none')
 
 const intl = Intl.NumberFormat('de-DE', {
   style: 'currency',
   currency: 'EUR',
 })
 
-const { lengthX } = useSwipe(top, {
+const { lengthX, isSwiping } = useSwipe(top, {
   passive: false,
   threshold: 5,
   onSwipe() {
@@ -86,14 +86,7 @@ const { lengthX } = useSwipe(top, {
   onSwipeEnd() {
     if (lengthX.value < -50) update()
     if (lengthX.value > 50) deleteCard()
-    transition.value = '150ms'
-
-    setTimeout(() => {
-      left.value = '0'
-      setTimeout(() => {
-        transition.value = 'none'
-      }, 50)
-    }, 100)
+    left.value = '0'
   },
 })