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

Question

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

改为

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

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

Answer 1

程序员Sunday 2022-03-04 14:40:04

你好

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

from -> active -> to

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

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