溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
CodePen 地址
前端使用 SPA 之后，能獲得更多的控制權，比如頁面切換動畫，使用后端頁面我們可能做不了上面的效果，或者做出來會出現明顯的閃屏。因為所有資源都需要重新加載。
今天使用 vue，vue-router，animejs 來講解如何上面的效果是如何實現的。
步驟
函數式調用組件
我希望效果是通過一個對象去調用，而不是 v-show, v-if 之類的指令，并且為了保持統一，仍然使用 Vue 來寫組件。我通常會用新的 Vue 根節點來實現，讓效果獨立于業務組件之外。
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')
}
}
接著實現 BubbleTransitionComponent，那么 BubbleTransition.scaleIn, BubbleTransition.scaleOut 就能正常工作了。 animejs 可以監聽的動畫執行結束的事件。anime().finished 獲得 Promise 對象。
<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 添加標記，beforeEach 的時候判斷判斷該標記執行動畫。但是這種做法不夠靈活，改成通過 Hash 來標記，結合 Vue-router，切換時重置 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()
})
酷炫的動畫能在一瞬間抓住用戶的眼球，我自己也經常在逛一些網站的時候發出，wocao，太酷了！！！的感嘆。可能最終的實現用不了幾行代碼，自己多動手實現一下，下次設計師提出不合理的動畫需求時可以裝逼，這種效果我分分鐘能做出來，但是我認為這里不應該使用 ** 動畫，不符合用戶的心理預期啊。
CodePen 地址
總結
以上所述是小編給大家介紹的Vue 頁面切換效果之 BubbleTransition(推薦)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
