diff --git a/package-lock.json b/package-lock.json
index 460c379bb164b6a9d1f914743b3b723fe0fce32e..72e6928b4581d4f007dd22a324701b11fbad33de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
         "@vue/runtime-core": "^3.4.21",
         "@vue/tsconfig": "^0.1.3",
+        "sass": "^1.77.8",
         "typescript": "^4.9.4",
         "vite": "5.2.8",
         "vue-tsc": "^1.0.24"
@@ -6749,6 +6750,12 @@
         }
       ]
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "devOptional": true
+    },
     "node_modules/import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -10366,6 +10373,23 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -16711,6 +16735,12 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
+    "immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "devOptional": true
+    },
     "import-local": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
@@ -19409,6 +19439,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.77.8",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.77.8.tgz",
+      "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==",
+      "devOptional": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
diff --git a/package.json b/package.json
index 87623f2d02fe0795f974f95630c6eabb82184260..34acb414730c47e685d64bab9dd19a942ecce2b1 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
     "@vue/runtime-core": "^3.4.21",
     "@vue/tsconfig": "^0.1.3",
+    "sass": "^1.77.8",
     "typescript": "^4.9.4",
     "vite": "5.2.8",
     "vue-tsc": "^1.0.24"
diff --git a/src/components/TodoItem.vue b/src/components/TodoItem.vue
index 924601c5091f500342c6ae99f4e18c015d00ec69..7191860f3301ccdaf145b6d7d4217729a6aaf6b9 100644
--- a/src/components/TodoItem.vue
+++ b/src/components/TodoItem.vue
@@ -1,20 +1,22 @@
 <template>
-  <div class="item">
-    <text>{{ props.todo.text }}</text>
-    <div class="btn" @click.stop="emits('toggle');">完成</div>
-  </div>
+  <transition name="fade-out-right">
+    <div class="item">
+      <text>{{ props.todo.text }}</text>
+      <div class="btn" @click.stop="emits('toggle')">完成</div>
+    </div>
+  </transition>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-const emits = defineEmits(['toggle'])
+import { ref } from "vue";
+const emits = defineEmits(["toggle"]);
 
 const props = defineProps({
   todo: {
     type: Object,
-    value: ''
-  }
-})
+    value: "",
+  },
+});
 </script>
 
 <style scoped>
@@ -28,4 +30,12 @@ const props = defineProps({
   border-radius: 12rpx;
   background-color: #fff;
 }
+.fade-out-right-leave-active {
+  transition: transform 1s, opacity 1s;
+}
+
+.fade-out-right-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
 </style>
diff --git a/src/components/TodoList.vue b/src/components/TodoList.vue
index dc0b03630ab0580f2d286a8a08202d009278b046..318eeb88783915be32893257fc01faf0899ebdc6 100644
--- a/src/components/TodoList.vue
+++ b/src/components/TodoList.vue
@@ -4,27 +4,27 @@
       v-for="(todo, index) in props.todos"
       :key="todo.text"
       :todo="todo"
+      v-show="!todo.completed"
       @toggle="() => toggleHandler(index)"
     />
   </div>
 </template>
 
 <script setup>
-import TodoItem from './TodoItem.vue';
+import TodoItem from "./TodoItem.vue";
 
-const emits = defineEmits(['toggle']);
+const emits = defineEmits(["toggle"]);
 
 const props = defineProps({
   todos: {
     type: Array,
-    value: []
-  }
-})
+    value: [],
+  },
+});
 
 const toggleHandler = (index) => {
-  emits('toggle', index);
-}
+  emits("toggle", index);
+};
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index a2f3de7cbad112b7e28bde04a3f13d6f3ba5530b..fde57c2ecc2c75c70fdd13fc4d4495d575acff35 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -10,22 +10,32 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import TodoList from '@/components/TodoList.vue';
+import { ref } from "vue";
+import TodoList from "@/components/TodoList.vue";
 
-const newTodo = ref('');
+const newTodo = ref("");
 const todos = ref([]);
 
 const addTodo = () => {
-  if (newTodo.value && !todos.value.some(todo => todo.text === newTodo.value)) {
-    todos.value.push({ text: newTodo.value, completed: false });
-    newTodo.value = '';
+  const todoFlag =
+    !todos.value.some((todo) => todo.text.trim() === newTodo.value.trim()) &&
+    newTodo.value.trim();
+  if (newTodo.value && todoFlag) {
+    todos.value.push({
+      text: newTodo.value,
+      completed: false,
+    });
+    newTodo.value = "";
   }
-}
+};
 
 const toggleTodo = (index) => {
-  todos.value.splice(index, 1);
-}
+  todos.value[index].completed = true;
+  setTimeout(() => {
+    todos.value.splice(index, 1);
+  }, 500);
+  // todos.value.splice(index, 1);
+};
 </script>
 
 <style lang="scss">