transition组件过渡效果

2019-05-30  本文已影响0人  魅眼ALong
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);
}
上一篇 下一篇

猜你喜欢

热点阅读