From 2d4c2821a7ebd0ae35b9ed23f144a73e3a85dc19 Mon Sep 17 00:00:00 2001
From: 6261244ee0f53859114f72b7 <6261244ee0f53859114f72b7@devide>
Date: Sun, 13 Nov 2022 04:09:54 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20todo=20=E6=B7=BB=E5=8A=A0/=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=20=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MyList.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/MyList.vue b/src/components/MyList.vue
index 78796ad..b642106 100644
--- a/src/components/MyList.vue
+++ b/src/components/MyList.vue
@@ -1,6 +1,8 @@
 <template>
     <ul class="todo-main">
-        <MyItem v-for="item in todos" :key="item.id" :item="item"></MyItem>
+        <transition-group name="todo-item">
+            <MyItem v-for="item in todos" :key="item.id" :item="item"></MyItem>
+        </transition-group>
     </ul>
 </template>
 
@@ -35,4 +37,21 @@ export default {
         padding-left: 5px;
         margin-top: 10px;
     }
+
+    .todo-item-enter-active {
+        animation: horizontal-move 0.1s linear;
+    }
+
+    .todo-item-leave-active {
+        animation: horizontal-move 0.1s linear reverse;
+    }
+
+    @keyframes horizontal-move {
+        from {
+            transform: translateX(100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
 </style>
\ No newline at end of file
-- 
GitLab