对于最新版的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
你好
这是一个解决方案,目前已在小节内置顶。
10
相似问题