Vue Transition實現(xiàn)類原生組件跳轉過渡動畫的示例
最近學習了Vue Transition的用法,感覺這個地方知識點挺多的,而且很重要,所以,今天添加一點小筆記
官方文檔:https://cn.vuejs.org/v2/guide/transitions.html
演示地址:http://www.coderlife.com (請在移動端查看,PC端查看請打開移動端調試模式)
前言
看了挺多Vue的UI框架都不帶過渡動畫,今天心血來潮,就把自己平時用的動效抽離出來。可直接通過腳手架init模版配合其他UI框架使用,不需要另外進行配置。
原理
模版中使用了Vue提供的封裝組件 transition,配合CSS類名在 enter/leave 的六種不同的狀態(tài)過渡中切換。
對于這些在 enter/leave 過渡中切換的類名,v- 是這些類名的前綴。使用 <transition name="my-transition">
可以重置前綴,比如 v-enter
替換為 my-transition-enter
。
重寫跳轉函數(shù)
// 根據(jù)具體的跳轉類型更改跳轉屬性值,執(zhí)行不同的動畫 const nextDirection = (direction) => { let el = document.getElementById('app') if (el) el.setAttribute('transition-direction', direction) } router['_push'] = router['push'] // 重寫路由跳轉方法,設置跳轉類型后跳轉 router.forward = router['push'] = (target) => { nextDirection('forward') setTimeout(() => { router['_push'](target) }) } // 重寫路由返回方法,設置跳轉類型后跳轉到上一頁 router.back = (target) => { nextDirection('back') if (target) { setTimeout(() => { router['_push'](target) }) } history.go(-1) }
How to use
# init template vue init CoderLQChou/v-transition-template my-transition-app # cd project cd my-transition-app # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build
倉庫地址:https://github.com/CoderLQChou/vue-transition-template
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue+element+springboot實現(xiàn)文件下載進度條展現(xiàn)功能示例
本文主要介紹了vue + element-ui + springboot 實現(xiàn)文件下載進度條展現(xiàn)功能,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11詳解vue-video-player使用心得(兼容m3u8)
這篇文章主要介紹了詳解vue-video-player使用心得(兼容m3u8),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-08-08vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟
這篇文章主要介紹了vue.js 2.*項目環(huán)境搭建、運行、打包發(fā)布的詳細步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05