vue实现页面跳转过渡效果 transition

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标签

如果觉得《vue实现页面跳转过渡效果 transition》对你有帮助，请点赞、收藏，并留下你的观点哦！