1.問題描述:
頁面跳轉(zhuǎn)是出現(xiàn)卡頓感褂删，閃爍感明顯，降低用戶體驗(yàn)臊泰。
2.解決方案：
利用動(dòng)畫緩解頁面跳轉(zhuǎn)閃爍感
3.具體實(shí)現(xiàn)
技術(shù)：利用transition (https://cn.vuejs.org/v2/guide/transitions.html
)
代碼：
<!-- -->
<template>
<div>
<!-- 使用transition組件解決路由跳轉(zhuǎn)頁面卡頓感 -->
<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 定義進(jìn)入過渡的結(jié)束狀態(tài)
leave-active 定義離開過渡的結(jié)束狀態(tài)
*/
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all 0.5s;
}
/*
enter定義進(jìn)入過渡的開始狀態(tài)
*/
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
/*
leave-to離場(chǎng)動(dòng)畫結(jié)束后的狀態(tài)
*/
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
