面包屑使用transition-group时，动画离开时多出一个分隔符

[jahnli]

TuSimple/naive-ui version (版本)

2.32.2

Vue version (Vue 版本)

3.2.37

Browser and its version (浏览器及其版本)

last

System and its version (系统及其版本)

window

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/busy-rosalind-l16qfi?file=/src/Demo.vue

Reappearance steps (重现步骤)

面包屑使用transition-group时，动画离开时多出一个分隔符

Expected results (期望的结果)

fix

Actual results (实际的结果)

面包屑使用transition-group时，动画离开时多出一个分隔符

Remarks (补充说明)

[jahnli]

https://user-images.githubusercontent.com/20943608/187080728-cbcbcfc4-2dfd-4899-8603-f5c87c60bbea.mp4

而且分隔符和字体的动画是不同步的，分隔符好像会慢一些

[pengxiaotian]

https://github.com/tusen-ai/naive-ui/issues/1648

[jahnli]

好像还不一样，transition-group有效果，但是离开动画会多个分隔符，而且分隔符的动画与文字不同步

[pengxiaotian]

好像还不一样，transition-group有效果，但是离开动画会多个分隔符，而且分隔符的动画与文字不同步

我刚补充。。你再看看

[jahnli]

@pengxiaotian 设置了href ， 好像会刷新页面，不会像跳转路由一样

[07akioni]

这个我感觉是 last-child 选择器对应的样式导致的...

[jahnli]

现在href点击是刷新网页，不是跳转路由 @07akioni

[07akioni]

现在href点击是刷新网页，不是跳转路由 @07akioni

这是一个 a11y 的问题，如果有跳转陆路由的需求最好在里面写 router-link

[jizai1125]

最后一个 breadcrumb-item 的分隔符使用 :last-child 选择器选中设置 display: none；如果放在 transition-group 中，切换时，新的 breadcrumb-item跟旧的 breadcrumb-item会同时存在 transition-group 中，导致 :last-child 没选中旧的最后一个breadcrumb-item。 解决方法：可以判断 breadcrumb-item 是否是最后一个，动态给它设置 separator

<n-breadcrumb>
      <transition-group name="breadcrumb">
        <n-breadcrumb-item
          v-for="(item, index) in arr"
          :key="item"
          :separator="index === arr.length - 1 ? '' : '/'"
        >
          {{ item.name }}
        </n-breadcrumb-item>
      </transition-group>
</n-breadcrumb>