feat: 面包屑新增过渡动画效果（同步 GiDemo 更新）

src/components/Breadcrumb/index.vue

@@ -1,14 +1,17 @@
 <template>
   <a-breadcrumb>
-    <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
+    <transition-group name="breadcrumb">
-      <span
+      <div v-for="(item, index) in breadcrumbList" :key="item.meta.title">
-        v-if="item.redirect === 'noRedirect' || item.redirect === '' || index === breadcrumbList.length - 1"
+        <a-breadcrumb-item>
-        class="gi_line_1"
+          <span
-      >
+            v-if="item.redirect === 'noRedirect' || item.redirect === '' || index === breadcrumbList.length - 1"
-        {{ item.meta.title }}
+            class="gi_line_1"
-      </span>
+          >{{ item.meta.title }}</span>
-      <span v-else class="gi_line_1 breadcrumb-item-title" @click="handleLink(item)">{{ item.meta.title }}</span>
+          <span v-else class="gi_line_1 breadcrumb-item-title" @click="handleLink(item)">{{ item.meta.title }}</span>
-    </a-breadcrumb-item>
+          <icon-right v-if="index !== breadcrumbList.length - 1" />
+        </a-breadcrumb-item>
+      </div>
+    </transition-group>
   </a-breadcrumb>
 </template>
 
@@ -59,6 +62,27 @@ function handleLink(item: RouteLocationMatched) {
 </script>
 
 <style scoped lang="scss">
+/** breadcrumb-transform 面包屑动画 */
+.breadcrumb-enter-active {
+  transition: all 0.2s;
+}
+
+.breadcrumb-enter-from,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+:deep(.arco-breadcrumb-item) {
+  padding: 0;
+  display: flex;
+  align-items: center;
+
+  .arco-icon-right {
+    margin: 0 4px;
+  }
+}
+
 .breadcrumb-item-title {
   transition: all 0.3s;
   cursor: pointer;