feat: todo 添加/删除 动画

src/components/MyList.vue

 <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