Vue Transition實(shí)現(xiàn)類(lèi)原生組件跳轉(zhuǎn)過(guò)渡動(dòng)畫(huà)的示例
最近學(xué)習(xí)了Vue Transition的用法，感覺(jué)這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記
官方文檔：https://cn.vuejs.org/v2/guide/transitions.html
演示地址：http://www.coderlife.com (請(qǐng)?jiān)谝苿?dòng)端查看，PC端查看請(qǐng)打開(kāi)移動(dòng)端調(diào)試模式)
前言
看了挺多Vue的UI框架都不帶過(guò)渡動(dòng)畫(huà)，今天心血來(lái)潮，就把自己平時(shí)用的動(dòng)效抽離出來(lái)?？芍苯油ㄟ^(guò)腳手架init模版配合其他UI框架使用，不需要另外進(jìn)行配置。
原理
模版中使用了Vue提供的封裝組件 transition，配合CSS類(lèi)名在 enter/leave 的六種不同的狀態(tài)過(guò)渡中切換。
對(duì)于這些在 enter/leave 過(guò)渡中切換的類(lèi)名，v- 是這些類(lèi)名的前綴。使用 <transition name="my-transition"> 可以重置前綴，比如 v-enter 替換為 my-transition-enter。
重寫(xiě)跳轉(zhuǎn)函數(shù)
// 根據(jù)具體的跳轉(zhuǎn)類(lèi)型更改跳轉(zhuǎn)屬性值，執(zhí)行不同的動(dòng)畫(huà)
const nextDirection = (direction) => {
let el = document.getElementById('app')
if (el) el.setAttribute('transition-direction', direction)
}
router['_push'] = router['push']
// 重寫(xiě)路由跳轉(zhuǎn)方法，設(shè)置跳轉(zhuǎn)類(lèi)型后跳轉(zhuǎn)
router.forward = router['push'] = (target) => {
nextDirection('forward')
setTimeout(() => { router['_push'](target) })
}
// 重寫(xiě)路由返回方法，設(shè)置跳轉(zhuǎn)類(lèi)型后跳轉(zhuǎn)到上一頁(yè)
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
倉(cāng)庫(kù)地址：https://github.com/CoderLQChou/vue-transition-template
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在vue中實(shí)現(xiàn)echarts隨窗體變化
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03
這篇文章主要介紹了Nuxt.js 靜態(tài)資源和打包的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue+element+springboot實(shí)現(xiàn)文件下載進(jìn)度條展現(xiàn)功能示例
本文主要介紹了vue + element-ui + springboot 實(shí)現(xiàn)文件下載進(jìn)度條展現(xiàn)功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
VUE識(shí)別訪問(wèn)設(shè)備是pc端還是移動(dòng)端的實(shí)現(xiàn)步驟
經(jīng)常在項(xiàng)目中會(huì)有支持pc與手機(jī)端需求,并且pc與手機(jī)端是兩個(gè)不一樣的頁(yè)面,這時(shí)就要求判斷設(shè)置,下面這篇文章主要給大家介紹了關(guān)于VUE識(shí)別訪問(wèn)設(shè)備是pc端還是移動(dòng)端的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
詳解vue-video-player使用心得（兼容m3u8）
這篇文章主要介紹了詳解vue-video-player使用心得（兼容m3u8），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue.js 2.*項(xiàng)目環(huán)境搭建、運(yùn)行、打包發(fā)布的詳細(xì)步驟
這篇文章主要介紹了vue.js 2.*項(xiàng)目環(huán)境搭建、運(yùn)行、打包發(fā)布的詳細(xì)步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vue.js打包之后可能會(huì)遇到的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-06-06
vue3?ref實(shí)現(xiàn)響應(yīng)式的方法
這篇文章主要介紹了vue3的ref是如何實(shí)現(xiàn)響應(yīng)式的,我們講了ref是如何實(shí)現(xiàn)響應(yīng)式的,主要分為兩種情況：ref接收的是number這種原始類(lèi)型、ref接收的是對(duì)象這種非原始類(lèi)型,需要的朋友可以參考下2024-07-07