老师，动画处理后，最后一个，会有 / 一闪而过，如何处理不让它出现？

来源：4-24 vue3 动画处理

一个人De奋斗

2022-04-28

解决前，尾部出现 /
图片描述

解决后，删除breadcrumb-leave-active
图片描述

写回答

2回答

星辉银河

2023-02-16

Element Plus是通过给DOM中最后一个el-breadcrumb-item的分隔符元素添加display:none来隐藏尾随的分隔符的。

但TransitionGroup组件在实现过渡动画的时候，会将触发进入过渡的新el-breadcrumb-item添加到后面，此时触发离开过渡的el-breadcrumb-item从最后一个元素变成了倒数第二个元素，所以它的分隔符元素不再被隐藏了。

解决方法就是给触发离开过渡的元素，添加隐藏分隔符的样式。

.breadcrumb-leave-active {
  display: inline-block;
  position: absolute;
  .el-breadcrumb__separator {
    display: none;
  }
}

Sunday

2022-04-28

你好

可以进行下判断，最后不显示 /

Sunday

一个人De奋斗

在 element-plus 中它会根据你的面包屑数据来判断是否需要在最后增加 /

2022-04-29

共4条回复

基于Vue3新标准，打造后台综合解决方案

基于Vue3重写Vue-element-admin,打造后台前端综合解决方案

1941 学习 · 1687 问题

相似问题

回答 1

回答 2

回答 1

回答 1

回答 1