創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元肇源做網(wǎng)站,已為上家服務(wù),為肇源各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

CodePen 地址

前端使用 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)的。

步驟

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

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

我希望效果是通過(guò)一個(gè)對(duì)象去調(diào)用，而不是 v-show, v-if 之類的指令，并且為了保持統(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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

分享名稱：Vue頁(yè)面切換效果之BubbleTransition(推薦)
網(wǎng)頁(yè)路徑：http://aaarwkj.com/article48/jjhdhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、外貿(mào)建站、網(wǎng)站改版、電子商務(wù)、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)