如何在Vue中使用Transition將原生組件跳轉(zhuǎn)過渡動畫

這篇文章主要介紹了如何在Vue中使用Transition將原生組件跳轉(zhuǎn)過渡動畫，億速云小編覺得不錯，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨億速云小編來看看吧！

vue是什么軟件

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

原理

模版中使用了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

以上就是億速云小編為大家收集整理的如何在Vue中使用Transition將原生組件跳轉(zhuǎn)過渡動畫，如何覺得億速云網(wǎng)站的內(nèi)容還不錯，歡迎將億速云網(wǎng)站推薦給身邊好友。