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

Question

解决前，尾部出现 /

解决后，删除breadcrumb-leave-active

Answer 1

星辉银河 2023-02-16 19:23:17

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;
  }
}

Answer 2

Sunday 2022-04-28 12:04:22

你好

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

• 提问者 一个人De奋斗 #1

  老师，我的意思是，当前在角色列表的情况下，点击员工管理菜单，过渡动画 会从 角色列表/   ，逐步消失，是一个逐渐消失的残影，而不是直接 角色列表 逐步消失
  现在，我通过transition.scss，将 .breadcrumb-leave-active删除，就不会显示 / 了
  
  它的问题产生原理是否这样，请指教：
  原数组：['用户', '角色列表']
  新数组：['用户', '员工管理']
  1、将新的 员工管理 加入数组中，成为 ['用户', '角色列表', '员工管理']
  2、由于面包屑组件设置了 separator='/' 属性，由于角色列表在第2项，所以离开时的动画，它实际显示为 角色列表/
  3、在过渡动画完成后，删除 数组第2个，即'角色列表/'，完成
  
  
  // 最终修改如下，可去除 / 残影
  .breadcrumb-enter-active {
    transition: all 0.2s;
  }
  
  .breadcrumb-enter-from,
  .breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(20px);
  }
  
  .breadcrumb-leave-active {
    position: absolute;
  }

• Sunday 回复 提问者 一个人De奋斗 #2

  我不太明白你的意思，动画无论以什么样的形式展示都是通过 css 来进行的展示方式呀。

• 提问者 一个人De奋斗 回复 Sunday #3

  回复 Sunday：也许我没有表述清楚，但目前问题已解决了，谢谢老师
  呈现解决前、解决后的gif动画，可能更能清晰的描述问题，详见顶部问题
  
  产生上述 / 的原因，是否可理解为上一回复中的 数组 问题？（没看element-plus的源码，估计是这原因）

点开查看后面1条评论