vue实现页面跳转过渡效果
当我们做移动端页面的页面跳转时,不想让页面跳转的那么生硬,所以需要添加过渡效果
html部分(name=“fade” 这是关键一步,fade 是自定义class名的一个标识)
<transition name="fade">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
css部分(fade-enter-active 中的 fade 就是上面的name定义的,在这里编辑过渡效果)
.fade-enter-active,
.fade-leave-active {
transition: all .2s linear;
}
.fade-enter {
transform: translateX(100%);
/* opacity: 0; */
}
.fade-leave-to {
transform: translateX(-100%);
}
加入keep-alive是需要设置页面缓存,
为了返回的时候记录上一页状态,
进出页面的时候还会触发activated和deactivated两个钩子函数,
真正实现过渡样式的是transition标签