快捷導(dǎo)航

Vue 頁(yè)面切換效果之 BubbleTransition(推薦)

更新時(shí)間：2018年04月08日 13:50:40 作者：HelKyle

使用 vue，vue-router，animejs 來(lái)講解如何實(shí)現(xiàn)vue頁(yè)面切換效果之 BubbleTransition，需要的朋友參考下吧

前端使用 SPA 之后，能獲得更多的控制權(quán)，比如頁(yè)面切換動(dòng)畫(huà)，使用后端頁(yè)面我們可能做不了上面的效果，或者做出來(lái)會(huì)出現(xiàn)明顯的閃屏。因?yàn)樗匈Y源都需要重新加載。

今天使用 vue，vue-router，animejs 來(lái)講解如何上面的效果是如何實(shí)現(xiàn)的。

步驟

點(diǎn)擊菜單，生成 Bubble，開(kāi)始執(zhí)行入場(chǎng)動(dòng)畫(huà)
頁(yè)面跳轉(zhuǎn)
執(zhí)行退場(chǎng)動(dòng)畫(huà)

函數(shù)式調(diào)用組件

我希望效果是通過(guò)一個(gè)對(duì)象去調(diào)用，而不是 v-show, v-if 之類(lèi)的指令，并且為了保持統(tǒng)一，仍然使用 Vue 來(lái)寫(xiě)組件。我通常會(huì)用新的 Vue 根節(jié)點(diǎn)來(lái)實(shí)現(xiàn)，讓效果獨(dú)立于業(yè)務(wù)組件之外。

let instance = null
function createServices (Comp) {
 // ...
 return new Vue({
 // ...
 }).$children[0]
}
function getInstance () {
 instance = instance || createServices(BubbleTransitionComponent)
 return instance
}
const BubbleTransition = {
 scaleIn: () => {
 return getInstance().animate('scaleIn')
 },
 fadeOut: () => {
 return getInstance().animate('fadeOut')
 }
}

接著實(shí)現(xiàn) BubbleTransitionComponent，那么 BubbleTransition.scaleIn, BubbleTransition.scaleOut 就能正常工作了。 animejs 可以監(jiān)聽(tīng)的動(dòng)畫(huà)執(zhí)行結(jié)束的事件。anime().finished 獲得 Promise 對(duì)象。

<template>
 <div class="transition-bubble">
 <span v-show="animating" class="bubble" id="bubble">
 </span>
 </div>
</template>
<script>
import anime from 'animejs'
export default {
 name: 'transition-bubble',
 data () {
 return {
  animating: false,
  animeObjs: []
 }
 },
 methods: {
 scaleIn (selector = '#bubble', {duration = 800, easing = 'linear'} = {}) {
  // this.animeObjs.push(anime().finished)
 },
 fadeOut (selector = '#bubble', {duration = 300, easing = 'linear'} = {}) {
  // ...
 },
 resetAnimeObjs () {
  this.animeObjs.reset()
  this.animeObjs = []
 },
 animate (action, thenReset) {
  return this[action]().then(() => {
  this.resetAnimeObjs()
  })
 }
 }
}

最初的想法是，在 router config 里面給特定路由 meta 添加標(biāo)記，beforeEach 的時(shí)候判斷判斷該標(biāo)記執(zhí)行動(dòng)畫(huà)。但是這種做法不夠靈活，改成通過(guò) Hash 來(lái)標(biāo)記，結(jié)合 Vue-router，切換時(shí)重置 hash。

<router-link class="router-link" to="/#__bubble__transition__">Home</router-link>
const BUBBLE_TRANSITION_IDENTIFIER = '__bubble__transition__'
router.beforeEach((to, from, next) => {
 if (to.hash.indexOf(BUBBLE_TRANSITION_IDENTIFIER) > 0) {
 const redirectTo = Object.assign({}, to)
 redirectTo.hash = ''
 BubbleTransition.scaleIn()
  .then(() => next(redirectTo))
 } else {
 next()
 }
})
router.afterEach((to, from) => {
 BubbleTransition.fadeOut()
})

酷炫的動(dòng)畫(huà)能在一瞬間抓住用戶的眼球，我自己也經(jīng)常在逛一些網(wǎng)站的時(shí)候發(fā)出，wocao，太酷了?。?！的感嘆?？赡茏罱K的實(shí)現(xiàn)用不了幾行代碼，自己多動(dòng)手實(shí)現(xiàn)一下，下次設(shè)計(jì)師提出不合理的動(dòng)畫(huà)需求時(shí)可以裝逼，這種效果我分分鐘能做出來(lái)，但是我認(rèn)為這里不應(yīng)該使用 ** 動(dòng)畫(huà)，不符合用戶的心理預(yù)期啊。

CodePen 地址

總結(jié)

以上所述是小編給大家介紹的Vue 頁(yè)面切換效果之 BubbleTransition(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: