快捷導(dǎo)航

Vue2路由動畫效果的實現(xiàn)代碼

更新時間：2017年07月10日 09:33:13 作者：xiaogezl

本篇文章主要介紹了Vue2路由動畫效果的實現(xiàn)代碼，可以根據(jù)不同的路徑去改變動畫的效果，有興趣的可以了解一下

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

<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鏈接在這，詳細的可以去看這https://router.vuejs.org/zh-cn/advanced/transitions.html

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

您可能感興趣的文章:

相關(guān)文章

詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css
這篇文章主要介紹了詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-11-11
Vue調(diào)試神器vue-devtools安裝方法
本篇文章主要介紹了Vue調(diào)試神器vue-devtools安裝方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
vite打包靜態(tài)文件打開顯示空白的解決
本文主要介紹了vite打包靜態(tài)文件打開顯示空白的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue彈出菜單功能的實現(xiàn)代碼
這篇文章主要介紹了Vue左側(cè)底部彈出菜單功能的實現(xiàn)代碼,需要的朋友可以參考下
2018-09-09
vue的props實現(xiàn)子組件隨父組件一起變化
這篇文章主要為大家詳細介紹了vue的props如何實現(xiàn)子組件隨父組件一起變化,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
Ant Design Vue如何生成動態(tài)菜單a-menu
這篇文章主要介紹了Ant Design Vue如何生成動態(tài)菜單a-menu問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
vue中使用vue-router切換頁面時滾動條自動滾動到頂部的方法
這篇文章主要介紹了vue項目中在使用vue-router切換頁面的時候滾動條自動滾動到頂部的實現(xiàn)方法，一般使用Window scrollTo() 方法實現(xiàn)，本文給大家簡單介紹了crollTop的使用,需要的朋友可以參考下
2017-11-11
Vue項目部署上線全過程記錄(保姆級教程)
vue項目開發(fā)完畢后,我們需要將項目打包上線,同時我們希望可以在本地預(yù)覽生產(chǎn)環(huán)境項目,下面這篇文章主要給大家介紹了關(guān)于Vue項目部署上線的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Pinia介紹及工作原理解析
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
Vue的Scroll滾動事件觸發(fā)方式
這篇文章主要介紹了Vue的Scroll滾動事件觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04