Vue2路由動(dòng)畫效果的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-09-20 06:49:17 來源：腳本之家閱讀：143 作者：xiaogezl 欄目：web開發(fā)

這篇文章主要講的是路由切換的時(shí)候動(dòng)畫效果的實(shí)現(xiàn)，可以根據(jù)不同的路徑去改變動(dòng)畫的效果，以下就是源碼，可供參考：

<template> 
 <div id="app"> 
 
  <transition :name="transitionName"> 
   <router-view class="child-view"></router-view> 
  </transition> 
 
 </div> 
</template> 
 
<script> 
 
export default { 
 name: 'app', 
 data () { 
  return { 
   transitionName: 'slide-left' 
  } 
 }, 
 mounted () { 
 }, 
 //監(jiān)聽路由的路徑，可以通過不同的路徑去選擇不同的切換效果 
 watch: { 
  '$route' (to, from) { 
   if(to.path == '/'){ 
    this.transitionName = 'slide-right'; 
   }else{ 
    this.transitionName = 'slide-left'; 
   } 
  } 
 } 
} 
</script> 
 
<style> 
.child-view { 
 position: absolute; 
 left: 0; 
 top: 0; 
 width: 100%; 
 height: 100%; 
 transition: all .5s cubic-bezier(.55,0,.1,1); 
} 
.slide-left-enter, .slide-right-leave-active { 
 opacity: 0; 
 -webkit-transform: translate(30px, 0); 
 transform: translate(30px, 0); 
} 
.slide-left-leave-active, .slide-right-enter { 
 opacity: 0; 
 -webkit-transform: translate(-30px, 0); 
 transform: translate(-30px, 0); 
} 
</style>

路由的api鏈接在這，詳細(xì)的可以去看這https://router.vuejs.org/zh-cn/advanced/transitions.html

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

Vue2路由動(dòng)畫效果的實(shí)現(xiàn)代碼

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽