最近學(xué)習(xí)了Vue Transition的用法，感覺這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記
官方文檔：https://cn.vuejs.org/v2/guide/transitions.html
演示地址：http://www.coderlife.com (請在移動端查看，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 templatevue init CoderLQChou/v-transition-template my-transition-app# cd projectcd my-transition-app# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build
倉庫地址：https://github.com/CoderLQChou/vue-transition-template
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
