<strike id="wymeo"></strike>

<strike id="wymeo"><input id="wymeo"></input></strike><del id="wymeo"></del>

Vue Transition 實(shí)現(xiàn)類原生組件跳轉(zhuǎn)過渡動畫

whatsns 發(fā)布于2019-08-21 12:01 / 3242人閱讀

摘要：官方文檔演示地址請?jiān)谝苿佣瞬榭矗瞬榭凑埓蜷_移動端調(diào)試模式前言看了挺多的框架都不帶過渡動畫，今天心血來潮，就把自己平時用的動效抽離出來。原理模版中使用了提供的封裝組件，配合類名在的六種不同的狀態(tài)過渡中切換。

官方文檔：https://cn.vuejs.org/v2/guide...

演示地址：http://www.coderlife.com (請?jiān)谝苿佣瞬榭矗琍C端查看請打開移動端調(diào)試模式)

前言

看了挺多Vue的UI框架都不帶過渡動畫，今天心血來潮，就把自己平時用的動效抽離出來。可直接通過腳手架init模版配合其他UI框架使用，不需要另外進(jìn)行配置。

原理

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

對于這些在 enter/leave 過渡中切換的類名，v- 是這些類名的前綴。使用可以重置前綴，比如 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/CoderLQCho... 歡迎star