Vue Transition實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動畫的示例
最近學(xué)習(xí)了Vue Transition的用法，感覺這個地方知識點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記
官方文檔：https://cn.vuejs.org/v2/guide/transitions.html
演示地址：http://www.coderlife.com (請?jiān)谝苿佣瞬榭?，PC端查看請打開移動端調(diào)試模式)
前言
看了挺多Vue的UI框架都不帶過渡動畫，今天心血來潮，就把自己平時用的動效抽離出來?？芍苯油ㄟ^腳手架init模版配合其他UI框架使用，不需要另外進(jìn)行配置。
原理
模版中使用了Vue提供的封裝組件 transition，配合CSS類名在 enter/leave 的六種不同的狀態(tài)過渡中切換。
對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用 <transition name="my-transition"> 可以重置前綴，比如 v-enter 替換為 my-transition-enter。
重寫跳轉(zhuǎn)函數(shù)
// 根據(jù)具體的跳轉(zhuǎn)類型更改跳轉(zhuǎn)屬性值，執(zhí)行不同的動畫
const nextDirection = (direction) => {
let el = document.getElementById('app')
if (el) el.setAttribute('transition-direction', direction)
}
router['_push'] = router['push']
// 重寫路由跳轉(zhuǎn)方法，設(shè)置跳轉(zhuǎn)類型后跳轉(zhuǎn)
router.forward = router['push'] = (target) => {
nextDirection('forward')
setTimeout(() => { router['_push'](target) })
}
// 重寫路由返回方法，設(shè)置跳轉(zhuǎn)類型后跳轉(zhuǎn)到上一頁
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
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js第一天學(xué)習(xí)筆記（數(shù)據(jù)的雙向綁定、常用指令）
這篇文章主要為大家分享了Vue.js第一天的學(xué)習(xí)筆記，包括數(shù)據(jù)的雙向綁定、常用指令學(xué)習(xí),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue代理請求數(shù)據(jù)出現(xiàn)404問題及解決
這篇文章主要介紹了Vue代理請求數(shù)據(jù)出現(xiàn)404的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
今天小編就為大家分享一篇淺談vuex的基本用法和mapaction傳值問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
element?ui時間日期選擇器el-date-picker報(bào)錯Prop?being?mutated:"
在日常開發(fā)中,我們會遇到一些情況,限制日期的范圍的選擇,下面這篇文章主要給大家介紹了關(guān)于element?ui時間日期選擇器el-date-picker報(bào)錯Prop?being?mutated:?"placement"的解決方式,需要的朋友可以參考下2022-08-08
vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點(diǎn)的方法
這篇文章主要介紹了vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點(diǎn)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡單多語操作
這篇文章主要介紹了vue實(shí)踐---vue不依賴外部資源實(shí)現(xiàn)簡單多語操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
眾所周知，一個項(xiàng)目在開發(fā)、測試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過官方也提供了相應(yīng)的配置方法，本文就來介紹一下2021-08-08
element表格翻頁第2頁從1開始編號(后端從0開始分頁)
這篇文章主要介紹了element表格翻頁第2頁從1開始編號(后端從0開始分頁)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家詳細(xì)介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實(shí)現(xiàn)代碼格式規(guī)范?+?保存自動修復(fù)代碼js+vue2022-07-07