transition组件中，无设置mode属性时，进入和离开时同时生效。
1.首先理解mode属性中的 "out-in" 和 "in-out"
| 属性名 | 区别 |
|---|---|
| out-in | 当前元素先进行过渡，完成后新元素过渡进入 |
| in-out | 新元素元素先进行过渡，完成后当前元素过渡离开 |
2.name属性：过渡的类名，具体查看官方文档
image.png
3.写一个后台管理系统中的例子
/*新元素过渡开始状态，和当前元素离开时生效*/
.fade-transform-enter,
.fade-transform-leave-active {
opacity: 0;
}
/*新元素进入过渡生效、当前元素离开时生效时的过渡时间*/
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
}
/*新元素进入前*/
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
/*当前元素离开结束*/
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
网友评论