对于最新版的ElementPlus面包屑的动画

来源:4-24 vue3 动画处理

sunzhenyang

2022-11-18

对于最新版的ElementPlus面包屑来说,
布局方式发生了改变,
单纯的 absolute 定位会使 .el-breadcrumb__item 元素堆叠在最左边,
造成最左边重影,
需要在 .breadcrumb-leave-active 上加一句 display: inline-block;

.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

/* 代码中的 leave-active 改成 leave-to 更合适一些 */
.breadcrumb-enter-from,
.breadcrumb-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-leave-active {
  display: inline-block; /* 加上这一句防止布局方式变化引起的最左侧重影问题 */
  position: absolute;
}
写回答

1回答

Sunday

2022-11-18

你好

这是一个解决方案,目前已在小节内置顶。

1
0

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

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

1955 学习 · 1719 问题

查看课程