transition组件过渡效果

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);
}