標(biāo)簽包裹
<transition>
<router-view></router-view>
</transition>
設(shè)置transition動(dòng)畫(huà)
<style scoped>
.contenBox{
color: red;
padding-top: 40px;
overflow: hidden;
}
.v-enter{
opacity: 0;
transform: translateX(100%);
}
.v-leave-to{
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
.v-enter-active,
.v-leave-active{
transition: all 0.5s ease;
}
<style >
解釋:
- .contenBox: overflow: hidden; 等帶進(jìn)入的頁(yè)面未萬(wàn)群進(jìn)入之前選擇隱藏,防止出現(xiàn)滾動(dòng)條
- transform: translateX(100%); 頁(yè)面從右邊進(jìn)入,橫向切換,占屏100%適應(yīng)性高
- .v-leave-to
transform: translateX(-100%); 頁(yè)面左邊消失
position: absolute; 絕對(duì)占用時(shí),頁(yè)面切離不占用位置,進(jìn)入的頁(yè)面不會(huì)被擠占位置出現(xiàn)抖動(dòng)