vue 页面闪烁的问题_vue项目解决路由跳转页面闪烁问题(过度动画)

1.问题描述:

页面跳转是出现卡顿感，闪烁感明显，降低用户体验。

2.解决方案：

利用动画缓解页面跳转闪烁感

3.具体实现

export default {

data() {

return {};

},

components: {},

mounted() {},

methods: {}

};

/*

enter-active 定义进入过渡的结束状态

leave-active 定义离开过渡的结束状态

*/

.fade-transform-leave-active,

.fade-transform-enter-active {

transition: all 0.5s;

}

/*

enter定义进入过渡的开始状态

*/

.fade-transform-enter {

opacity: 0;

transform: translateX(-30px);

}

/*

leave-to离场动画结束后的状态

*/

.fade-transform-leave-to {

opacity: 0;

transform: translateX(30px);

}