如何在Vue中使用Transition將原生組件跳轉過渡動畫

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

vue是什么軟件

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

原理

模版中使用了Vue提供的封裝組件 transition，配合CSS類名在 enter/leave 的六種不同的狀態過渡中切換。

對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用 <transition name="my-transition"> 可以重置前綴，比如 v-enter 替換為 my-transition-enter。

重寫跳轉函數

// 根據具體的跳轉類型更改跳轉屬性值，執行不同的動畫
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

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