点集添加删除动画

Author: Linho1219

src/editor/inputs/coordArrInputs.vue

@@ -6,50 +6,39 @@
     :animation="200"
     handle="span.coordarr-drag"
   >
-    <div
-      v-for="(data, index) in privateData"
-      class="input-box coord coordarr"
-      :key="data.id"
-    >
-      <span class="coordarr-drag">
-        <s-icon name="menu">
-          <svg viewBox="0 -960 960 960">
-            <path
-              d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z"
-            ></path>
-          </svg>
-        </s-icon>
-      </span>
-
-      <span class="coord-label">{{
-        t(fnType.coordArr.label) + fnType.coordArr.fir
-      }}</span>
-      <s-text-field
-        type="number"
-        class="styled"
-        v-model="data.payload[0]"
-        :label="t(fnType.coordArr.placeholder[0])"
-      >
-      </s-text-field>
-      <span class="coord-label">{{ fnType.coordArr.sep }}</span>
-      <s-text-field
-        type="number"
-        class="styled"
-        v-model="data.payload[1]"
-        :label="t(fnType.coordArr.placeholder[1])"
+    <TransitionGroup name="coord-trans">
+      <div
+        class="input-box coord coordarr"
+        v-for="(data, index) in privateData"
+        :key="data.id"
       >
-      </s-text-field>
-      <span class="coord-label">{{ fnType.coordArr.fin }}</span>
-      <s-icon-button @click="privateData.splice(index, 1)">
-        <s-icon>
-          <svg viewBox="0 -960 960 960">
-            <path
-              d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
-            ></path>
-          </svg>
-        </s-icon>
-      </s-icon-button>
-    </div>
+        <span class="coordarr-drag">
+          <SIconDragAlt />
+        </span>
+        <span class="coord-label">{{
+          t(fnType.coordArr.label) + fnType.coordArr.fir
+        }}</span>
+        <s-text-field
+          type="number"
+          class="styled"
+          v-model="data.payload[0]"
+          :label="t(fnType.coordArr.placeholder[0])"
+        >
+        </s-text-field>
+        <span class="coord-label">{{ fnType.coordArr.sep }}</span>
+        <s-text-field
+          type="number"
+          class="styled"
+          v-model="data.payload[1]"
+          :label="t(fnType.coordArr.placeholder[1])"
+        >
+        </s-text-field>
+        <span class="coord-label">{{ fnType.coordArr.fin }}</span>
+        <s-icon-button @click="privateData.splice(index, 1)">
+          <SIconDelete />
+        </s-icon-button>
+      </div>
+    </TransitionGroup>
   </VueDraggable>
   <s-button
     v-if="fnType.coordArr"
@@ -74,6 +63,9 @@ import { InputProps } from "../../consts";
 import { onMounted, ref, watch } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 
+import SIconDragAlt from "@/ui/icons/dragalt.vue";
+import SIconDelete from "@/ui/icons/delete.vue";
+
 const { dataItem, fnType } = defineProps<InputProps>();
 
 type PrivateData = {
@@ -108,7 +100,7 @@ onMounted(() => {
 .coordarr-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 0.8rem;
+  gap: 10px;
 }
 
 .coordarr-drag {
@@ -133,3 +125,23 @@ onMounted(() => {
   font-size: 20px;
 }
 </style>
+
+<style>
+.coord-trans-enter-active,
+.coord-trans-leave-active {
+  transition:
+    margin-bottom var(--s-motion-duration-short4)
+      var(--s-motion-easing-emphasized),
+    clip-path var(--s-motion-duration-short4) var(--s-motion-easing-emphasized);
+}
+.coord-trans-enter-to,
+.coord-trans-leave-from {
+  margin-bottom: 0;
+  clip-path: inset(-10px 0 0 0);
+}
+.coord-trans-enter-from,
+.coord-trans-leave-to {
+  margin-bottom: -58px;
+  clip-path: inset(-10px 0 100% 0);
+}
+</style>

src/ui/icons/dragalt.vue

@@ -0,0 +1,9 @@
+<template>
+  <s-icon>
+    <svg viewBox="0 -960 960 960">
+      <path
+        d="M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160Zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160ZM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400Zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400ZM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640Zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640Z"
+      ></path>
+    </svg>
+  </s-icon>
+</template>