欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年07月10日 09:33:13   作者：xiaogezl  
本篇文章主要介紹了Vue2路由動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼，可以根據(jù)不同的路徑去改變動(dòng)畫(huà)的效果，有興趣的可以了解一下

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

<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)聽(tīng)路由的路徑，可以通過(guò)不同的路徑去選擇不同的切換效果 
 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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論