From 9bd3ac93b8cfc734b66f74d3c640960070dfaf75 Mon Sep 17 00:00:00 2001
From: Linho <lhp@linho.cc>
Date: Sat, 26 Apr 2025 21:23:32 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=82=B9=E9=9B=86=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/inputs/coordArrInputs.vue | 100 +++++++++++++++------------
 src/ui/icons/dragalt.vue             |   9 +++
 2 files changed, 65 insertions(+), 44 deletions(-)
 create mode 100644 src/ui/icons/dragalt.vue

diff --git a/src/editor/inputs/coordArrInputs.vue b/src/editor/inputs/coordArrInputs.vue
index f5201cf..2e6e15b 100644
--- a/src/editor/inputs/coordArrInputs.vue
+++ b/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>
diff --git a/src/ui/icons/dragalt.vue b/src/ui/icons/dragalt.vue
new file mode 100644
index 0000000..18161c2
--- /dev/null
+++ b/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>

From 7f0c088658dd7fa4b10c2edeaf9ece0c210ee528 Mon Sep 17 00:00:00 2001
From: Linho <lhp@linho.cc>
Date: Sat, 26 Apr 2025 22:33:14 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=8C=85=E8=A3=85=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=88=97=E8=A1=A8=E5=8A=A8=E7=94=BB=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                    |   8 +
 src/consts.ts                            |   1 +
 src/editor/datum.vue                     | 205 +++++++++++------------
 src/editor/datumList.vue                 |  23 ++-
 src/editor/inputs/coordArrInputs.vue     |  94 +++++------
 src/ui/animatedList/animatedList.vue     |   5 +
 src/ui/animatedList/animatedListItem.vue |  24 +++
 7 files changed, 191 insertions(+), 169 deletions(-)
 create mode 100644 src/ui/animatedList/animatedList.vue
 create mode 100644 src/ui/animatedList/animatedListItem.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c91cd66..4f62d6f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -32,5 +32,13 @@
       "folderNames": ["icons"],
       "rootFolderNames": ["icons"]
     },
+    {
+      "name": "animate",
+      "base": "animation",
+      "color": "purple-400",
+      "lightColor": "purple-100",
+      "folderNames": ["animatedList"],
+      "rootFolderNames": ["animatedList"]
+    },
   ]
 }
diff --git a/src/consts.ts b/src/consts.ts
index 4e999bf..15f4561 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -82,6 +82,7 @@ export function getNewDatum(): InternalDatum {
     key: Math.random(),
     fnType: "linear",
     graphType: "polyline",
+    fn: "",
   };
 }
 
diff --git a/src/editor/datum.vue b/src/editor/datum.vue
index 698be10..bdb9e44 100644
--- a/src/editor/datum.vue
+++ b/src/editor/datum.vue
@@ -1,87 +1,104 @@
 <template>
-  <s-fold :folded="hidden" v-if="dataItem" class="plot-data-fold">
-    <div class="plot-data" ref="block" :class="{ hidden: dataItem.hidden }">
-      <div class="selectors">
-        <s-picker
-          :label="t('inputs.fnType')"
-          v-model.lazy="dataItem.fnType"
-          @change="fnTypeChange(dataItem)"
-          :key="selectKey"
-        >
-          <s-picker-item
-            v-for="(type, index) in fnTypeArr"
-            :value="type.value"
-            :selected="index === 0"
+  <div
+    class="plot-data"
+    ref="block"
+    :class="{ hidden: dataItem.hidden }"
+    v-if="dataItem"
+  >
+    <div class="selectors">
+      <s-picker
+        :label="t('inputs.fnType')"
+        v-model.lazy="dataItem.fnType"
+        @change="fnTypeChange(dataItem)"
+        :key="selectKey"
+      >
+        <s-picker-item v-for="type in fnTypeArr" :value="type.value">
+          {{ t(type.label) }}
+        </s-picker-item>
+      </s-picker>
+      <s-picker
+        :label="t('inputs.graphType')"
+        v-model.lazy="dataItem.graphType"
+        v-if="dataItem.graphType !== 'text'"
+        @change="graphTypeChange(dataItem)"
+        :key="selectKey"
+      >
+        <s-picker-item v-for="type in allowedGraphType" :value="type.value">
+          {{ t(type.label) }}
+        </s-picker-item>
+      </s-picker>
+      <div style="flex-grow: 1"></div>
+      <div class="dataBlockBtns">
+        <s-tooltip>
+          <s-icon-button
+            slot="trigger"
+            @click="deleteDatum"
+            style="color: var(--s-color-error)"
           >
-            {{ t(type.label) }}
-          </s-picker-item>
-        </s-picker>
-        <s-picker
-          :label="t('inputs.graphType')"
-          v-model.lazy="dataItem.graphType"
-          v-if="dataItem.graphType !== 'text'"
-          @change="graphTypeChange(dataItem)"
-          :key="selectKey"
-        >
-          <s-picker-item
-            v-for="(type, index) in allowedGraphType"
-            :value="type.value"
-            :selected="index === 0"
+            <SIconDelete />
+          </s-icon-button>
+          {{ t("buttons.del") }}
+        </s-tooltip>
+        <s-tooltip>
+          <s-icon-button
+            slot="trigger"
+            @click="dataItem.hidden = !dataItem.hidden"
+            :type="dataItem.hidden ? 'filled-tonal' : 'standard'"
           >
-            {{ t(type.label) }}
-          </s-picker-item>
-        </s-picker>
-        <div style="flex-grow: 1"></div>
-        <div class="dataBlockBtns">
-          <s-tooltip>
-            <s-icon-button
-              slot="trigger"
-              @click="deleteDatum"
-              style="color: var(--s-color-error)"
-            >
-              <SIconDelete />
-            </s-icon-button>
-            {{ t("buttons.del") }}
-          </s-tooltip>
-          <s-tooltip>
-            <s-icon-button
-              slot="trigger"
-              @click="dataItem.hidden = !dataItem.hidden"
-              :type="dataItem.hidden ? 'filled-tonal' : 'standard'"
-            >
-              <SIconHide />
-            </s-icon-button>
-            {{ t("buttons.hide") }}
-          </s-tooltip>
-          <s-tooltip>
-            <s-icon-button
-              slot="trigger"
-              @click="
-                blockFolded = !blockFolded;
-                console.log(foldShell);
-              "
-            >
-              <s-icon :name="blockFolded ? 'chevron_down' : 'chevron_up'">
-              </s-icon>
-            </s-icon-button>
-            {{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
-          </s-tooltip>
-          <span class="datablock-drag">
-            <SIconDrag />
-          </span>
-        </div>
+            <SIconHide />
+          </s-icon-button>
+          {{ t("buttons.hide") }}
+        </s-tooltip>
+        <s-tooltip>
+          <s-icon-button
+            slot="trigger"
+            @click="
+              blockFolded = !blockFolded;
+              console.log(foldShell);
+            "
+          >
+            <s-icon :name="blockFolded ? 'chevron_down' : 'chevron_up'">
+            </s-icon>
+          </s-icon-button>
+          {{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
+        </s-tooltip>
+        <span class="datablock-drag">
+          <SIconDrag />
+        </span>
       </div>
+    </div>
 
-      <div class="inputs">
-        <StrInputs :dataItem="dataItem" :fnType="fnType" />
+    <div class="inputs">
+      <StrInputs :dataItem="dataItem" :fnType="fnType" />
+      <CoordInputs
+        v-if="fnType.coord"
+        :dataItem="dataItem"
+        :fnType="fnType"
+        :blockFolded="false"
+      />
+      <CoordArrInputs
+        v-if="fnType.coordArr"
+        :dataItem="dataItem"
+        :fnType="fnType"
+      />
+      <SwitchInputs
+        v-if="fnType.switches"
+        :dataItem="dataItem"
+        :fnType="fnType"
+        :blockFolded="false"
+      />
+    </div>
+    <s-fold :folded="blockFolded">
+      <div class="inputs optional">
+        <s-divider>{{ t("title.moreOptions") }}</s-divider>
         <CoordInputs
           v-if="fnType.coord"
           :dataItem="dataItem"
           :fnType="fnType"
-          :blockFolded="false"
+          :blockFolded="true"
         />
-        <CoordArrInputs
-          v-if="fnType.coordArr"
+        <OptInputs
+          v-if="fnType.optInput"
           :dataItem="dataItem"
           :fnType="fnType"
         />
@@ -89,33 +106,11 @@
           v-if="fnType.switches"
           :dataItem="dataItem"
           :fnType="fnType"
-          :blockFolded="false"
+          :blockFolded="true"
         />
       </div>
-      <s-fold :folded="blockFolded">
-        <div class="inputs optional">
-          <s-divider>{{ t("title.moreOptions") }}</s-divider>
-          <CoordInputs
-            v-if="fnType.coord"
-            :dataItem="dataItem"
-            :fnType="fnType"
-            :blockFolded="true"
-          />
-          <OptInputs
-            v-if="fnType.optInput"
-            :dataItem="dataItem"
-            :fnType="fnType"
-          />
-          <SwitchInputs
-            v-if="fnType.switches"
-            :dataItem="dataItem"
-            :fnType="fnType"
-            :blockFolded="true"
-          />
-        </div>
-      </s-fold>
-    </div>
-  </s-fold>
+    </s-fold>
+  </div>
 </template>
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
@@ -128,7 +123,7 @@ import {
   getFnType,
   InternalDatum,
 } from "../consts";
-import { ref, computed, onMounted } from "vue";
+import { ref, computed } from "vue";
 import StrInputs from "./inputs/strInputs.vue";
 import CoordInputs from "./inputs/coordInputs.vue";
 import SwitchInputs from "./inputs/switchInputs.vue";
@@ -146,18 +141,12 @@ const blockFolded = ref(true);
 
 const foldShell = ref<HTMLElementTagNameMap["s-fold"]>();
 
-const hidden = ref(true);
-
-onMounted(() => setTimeout(() => (hidden.value = false), 0));
 import { Snackbar } from "sober";
 import { useProfile } from "../consts";
 const profile = useProfile();
 function deleteDatum() {
-  hidden.value = true;
   const backup = cloneDeep(dataItem.value)!;
-  setTimeout(() => {
-    profile.data.splice(props.index, 1);
-  }, 200);
+  profile.data.splice(props.index, 1);
   Snackbar.builder({
     text: t("title.deleteSuccess"),
     action: {
@@ -238,7 +227,7 @@ watch(locale, () => selectKey.value++);
   opacity: 0.6;
   filter: contrast(0.6) saturate(0.8);
 }
-.plot-data-fold {
+.datumFolder {
   border-bottom: var(--s-color-outline-variant) 1px solid;
 }
 .selectors {
diff --git a/src/editor/datumList.vue b/src/editor/datumList.vue
index 4fd801b..cc4071d 100644
--- a/src/editor/datumList.vue
+++ b/src/editor/datumList.vue
@@ -5,12 +5,15 @@
       :animation="200"
       handle=".datablock-drag"
     >
-      <Datum
-        v-for="(dataItem, i) in profile.data"
-        v-model="profile.data[i]"
-        :index="i"
-        :key="dataItem.key"
-      />
+      <AnimatedList>
+        <AnimatedListItem
+          v-for="(dataItem, i) in profile.data"
+          :key="dataItem.key"
+          class="datumFolder"
+        >
+          <Datum v-model="profile.data[i]" :index="i" />
+        </AnimatedListItem>
+      </AnimatedList>
     </VueDraggable>
     <div class="plot-data add-data" @click="profile.data.push(getNewDatum())">
       <s-icon name="add" />
@@ -26,9 +29,17 @@ const { t } = useI18n();
 
 import { VueDraggable } from "vue-draggable-plus";
 
+import AnimatedList from "@/ui/animatedList/animatedList.vue";
+import AnimatedListItem from "@/ui/animatedList/animatedListItem.vue";
 import Datum from "./datum.vue";
 
 import { getNewDatum } from "@/consts";
 import { useProfile } from "@/consts";
 const profile = useProfile();
 </script>
+
+<style>
+.datumFolder {
+  border-bottom: var(--s-color-outline-variant) 1px solid;
+}
+</style>
diff --git a/src/editor/inputs/coordArrInputs.vue b/src/editor/inputs/coordArrInputs.vue
index 2e6e15b..7c448ad 100644
--- a/src/editor/inputs/coordArrInputs.vue
+++ b/src/editor/inputs/coordArrInputs.vue
@@ -6,39 +6,37 @@
     :animation="200"
     handle="span.coordarr-drag"
   >
-    <TransitionGroup name="coord-trans">
-      <div
-        class="input-box coord coordarr"
-        v-for="(data, index) in privateData"
-        :key="data.id"
-      >
-        <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>
+    <AnimatedList>
+      <AnimatedListItem v-for="(data, index) in privateData" :key="data.id">
+        <div class="input-box coord coordarr">
+          <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>
+      </AnimatedListItem>
+    </AnimatedList>
   </VueDraggable>
   <s-button
     v-if="fnType.coordArr"
@@ -66,6 +64,9 @@ import { VueDraggable } from "vue-draggable-plus";
 import SIconDragAlt from "@/ui/icons/dragalt.vue";
 import SIconDelete from "@/ui/icons/delete.vue";
 
+import AnimatedList from "@/ui/animatedList/animatedList.vue";
+import AnimatedListItem from "@/ui/animatedList/animatedListItem.vue";
+
 const { dataItem, fnType } = defineProps<InputProps>();
 
 type PrivateData = {
@@ -100,7 +101,10 @@ onMounted(() => {
 .coordarr-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+}
+
+.input-box.coord.coordarr{
+  margin-top: 10px;
 }
 
 .coordarr-drag {
@@ -110,7 +114,7 @@ onMounted(() => {
   border-radius: 5px;
 }
 
-.sortable-chosen > .coordarr-drag {
+.sortable-chosen .coordarr-drag {
   background: var(--s-color-outline-variant);
   z-index: 999;
 }
@@ -125,23 +129,3 @@ 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>
diff --git a/src/ui/animatedList/animatedList.vue b/src/ui/animatedList/animatedList.vue
new file mode 100644
index 0000000..52c3ae6
--- /dev/null
+++ b/src/ui/animatedList/animatedList.vue
@@ -0,0 +1,5 @@
+<template>
+  <TransitionGroup name="list-trans">
+    <slot></slot>
+  </TransitionGroup>
+</template>
\ No newline at end of file
diff --git a/src/ui/animatedList/animatedListItem.vue b/src/ui/animatedList/animatedListItem.vue
new file mode 100644
index 0000000..ab80157
--- /dev/null
+++ b/src/ui/animatedList/animatedListItem.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="animatedListItem" :class="$props.class">
+    <div class="animatedListItemInner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+.animatedListItem {
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  transition: grid-template-rows var(--s-motion-duration-short4, 0.2s)
+    var(--s-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+}
+.animatedListItemInner {
+  min-height: 0;
+}
+.list-trans-enter-from,
+.list-trans-leave-to {
+  grid-template-rows: 0fr;
+}
+</style>