快捷導(dǎo)航

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)文章

vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
通過(guò)vue提供的keep-alive減少對(duì)服務(wù)器的請(qǐng)求次數(shù)
這篇文章主要介紹了通過(guò)vue提供的keep-alive減少對(duì)服務(wù)器的請(qǐng)求次數(shù),文中給大家補(bǔ)充介紹了vue路由開(kāi)啟keep-alive時(shí)的注意點(diǎn)，需要的朋友可以參考下
2018-04-04
vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue如何修改瀏覽器的標(biāo)題title
這篇文章主要介紹了vue如何修改瀏覽器的標(biāo)題title問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息
這篇文章主要介紹了vue 實(shí)現(xiàn)websocket發(fā)送消息并實(shí)時(shí)接收消息,項(xiàng)目結(jié)合vue腳手架和websocket來(lái)搭建，本文給大家分享實(shí)例代碼，需要的朋友可以參考下
2019-12-12
Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue中父組件向子組件傳遞數(shù)據(jù)的幾種方法
最近在學(xué)習(xí)vue的源碼，總結(jié)了幾種vue中父子組件傳遞數(shù)據(jù)的方法。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn)
在Vue前端項(xiàng)目中,可以通過(guò)修改配置文件來(lái)指定啟動(dòng)的端口號(hào),本文就來(lái)介紹一下vue項(xiàng)目啟動(dòng)端口更改的實(shí)現(xiàn),感興趣的可以了解一下
2023-10-10
在vue上使用cesium開(kāi)發(fā)三維地圖的詳細(xì)過(guò)程
這篇文章主要給大家介紹了關(guān)于在vue上使用cesium開(kāi)發(fā)三維地圖的詳細(xì)過(guò)程,Cesium是一個(gè)強(qiáng)大的JavaScript庫(kù),支持三維地理信息展示,并提供了豐富的地理空間數(shù)據(jù)可視化功能,需要的朋友可以參考下
2023-12-12
vue項(xiàng)目中的public、static及指定不編譯文件問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中的public、static及指定不編譯文件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03