1.问题描述:
页面跳转是出现卡顿感，闪烁感明显，降低用户体验。
2.解决方案：
利用动画缓解页面跳转闪烁感
3.具体实现
技术：利用transition (https://cn.vuejs.org/v2/guide/transitions.html
)
代码：
<!-- -->
<template>
<div>
<!-- 使用transition组件解决路由跳转页面卡顿感 -->
<transition name="fade-transform" mode="out-in">
<!-- <keep-alive> -->
<router-view />
<!-- </keep-alive> -->
</transition>
</div>
</template>
<script>
export default {
data() {
return {};
},
components: {},
mounted() {},
methods: {}
};
</script>
<style scoped>
/*
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);
}
</style>
