Vue2路由動畫效果的實現(xiàn)代碼
更新時間：2017年07月10日 09:33:13 作者：xiaogezl
本篇文章主要介紹了Vue2路由動畫效果的實現(xiàn)代碼，可以根據不同的路徑去改變動畫的效果，有興趣的可以了解一下
這篇文章主要講的是路由切換的時候動畫效果的實現(xiàn)，可以根據不同的路徑去改變動畫的效果，以下就是源碼，可供參考：
<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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css
這篇文章主要介紹了詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本篇文章主要介紹了Vue調試神器vue-devtools安裝方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
本文主要介紹了vite打包靜態(tài)文件打開顯示空白的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了Vue左側底部彈出菜單功能的實現(xiàn)代碼,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細介紹了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項目開發(fā)完畢后,我們需要將項目打包上線,同時我們希望可以在本地預覽生產環(huán)境項目,下面這篇文章主要給大家介紹了關于Vue項目部署上線的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了Vue的Scroll滾動事件觸發(fā)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04