我觉得将breadcrumb-leave-active 改为 breadcrumb-leave-to 更好理解一点。

来源：4-24 vue3 动画处理

thinker_holmes

2022-03-04

.breadcrumb-enter-from,
.breadcrumb-leave-active {
opacity: 0;
transform: translateX(20px);
}

改为

.breadcrumb-enter-from,
.breadcrumb-leave-to {
opacity: 0;
transform: translateX(20px);
}

这样不是更好理解一点吗，而且效果是一样的。开始进来、结束的时候透明度为0。
老师那种写法是为什么？

写回答

1回答

Sunday

2022-03-04

你好

根据 v3 的动画文档我们可以知道，它的动画流程为：

from -> active -> to

//img.mukewang.com/szimg/6221b35909db136e17900798.jpg

而对于这个流程来说，leave-active 表示《离开进行中》。leave-to 表示《离开完成后》。

如果以结果为导向，只要可以实现效果，那么都是可以的。

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

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

1941 学习 · 1687 问题

相似问题

回答 2

回答 1

回答 3

回答 4

回答 1