添加过渡动画

src/assets/css/anim.scss

@@ -0,0 +1,17 @@
+.list-move, /* 对移动中的元素应用的过渡 */
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* 确保将离开的元素从布局流中删除
+  以便能够正确地计算移动的动画。 */
+.list-leave-active {
+  position: absolute;
+}

src/assets/css/style.scss

@@ -1,5 +1,6 @@
 @import "@icon-park/vue-next/styles/index.css";
 @import "colors";
+@import "anim";
 
 html, body {
   padding: 0;