Vue2路由動(dòng)畫效果的實(shí)現(xiàn)代碼
這篇文章主要講的是路由切換的時(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)聽(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í)有所幫助,也希望大家多多支持腳本之家。
- 詳解vue2路由vue-router配置(懶加載)
- vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的方法詳解
- 深入理解vue2.0路由如何配置問(wèn)題
- vue2筆記 — vue-router路由懶加載的實(shí)現(xiàn)
- vue2.0 路由不顯示router-view的解決方法
- vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)的具體用法(路由守衛(wèi))
- 詳解Vue2.X的路由管理記錄之 鉤子函數(shù)(切割流水線)
- vue2導(dǎo)航根據(jù)路由傳值,而改變導(dǎo)航內(nèi)容的實(shí)例
- 基于Vue2.X的路由和鉤子函數(shù)詳解
- vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)(路由守衛(wèi))
- vue2路由基本用法實(shí)例分析
相關(guān)文章
詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css
這篇文章主要介紹了詳解在vue-cli中引用jQuery、bootstrap以及使用sass、less編寫css,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11vue的props實(shí)現(xiàn)子組件隨父組件一起變化
這篇文章主要為大家詳細(xì)介紹了vue的props如何實(shí)現(xiàn)子組件隨父組件一起變化,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10Ant Design Vue如何生成動(dòng)態(tài)菜單a-menu
這篇文章主要介紹了Ant Design Vue如何生成動(dòng)態(tài)菜單a-menu問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01vue中使用vue-router切換頁(yè)面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
這篇文章主要介紹了vue項(xiàng)目中在使用vue-router切換頁(yè)面的時(shí)候滾動(dòng)條自動(dòng)滾動(dòng)到頂部的實(shí)現(xiàn)方法,一般使用Window scrollTo() 方法實(shí)現(xiàn),本文給大家簡(jiǎn)單介紹了crollTop的使用,需要的朋友可以參考下2017-11-11Vue項(xiàng)目部署上線全過(guò)程記錄(保姆級(jí)教程)
vue項(xiàng)目開(kāi)發(fā)完畢后,我們需要將項(xiàng)目打包上線,同時(shí)我們希望可以在本地預(yù)覽生產(chǎn)環(huán)境項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目部署上線的相關(guān)資料,需要的朋友可以參考下2023-03-03