transition组件过渡效果
2019-05-30 本文已影响0人
魅眼ALong
transition组件中,无设置mode属性时,进入和离开时同时生效。
1.首先理解mode属性中的 "out-in" 和 "in-out"
属性名 | 区别 |
---|---|
out-in | 当前元素先进行过渡,完成后新元素过渡进入 |
in-out | 新元素元素先进行过渡,完成后当前元素过渡离开 |
2.name属性:过渡的类名,具体查看官方文档
image.png3.写一个后台管理系统中的例子
/*新元素过渡开始状态,和当前元素离开时生效*/
.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);
}