首頁 > web前端 > js教程 > Vue 頁面切換效果之 BubbleTransition

Vue 頁面切換效果之 BubbleTransition

亚连
發布: 2018-05-26 09:57:11
原創
1788 人瀏覽過

使用vue,vue-router,animejs 來講解如何實現vue頁面切換效果之BubbleTransition,需要的朋友參考下吧

## 

CodePen 位址

#前端使用SPA 之後,能獲得更多的控制權,例如頁面切換動畫,使用後端頁面我們可能做不了上面的效果,或者做出來會出現明顯的閃屏。因為所有資源都需要重新載入。

今天使用 vue,vue-router,animejs 來講解如何上面的效果是如何實現的。

步驟

  1. 點擊選單,產生Bubble,開始執行入場動畫

  2. #頁面跳轉

  3. 執行退場動畫

#函數式呼叫元件

我希望效果是透過一個物件去調用,而不是v-show, v-if 之類的指令,並且為了保持統一,仍然使用Vue 來寫入元件。我通常會用新的 Vue 根節點來實現,讓效果獨立於業務元件之外。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

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 物件。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<template>

 <p class="transition-bubble">

 <span v-show="animating" class="bubble" id="bubble">

 </span>

 </p>

</template>

<script>

import anime from &#39;animejs&#39;

export default {

 name: &#39;transition-bubble&#39;,

 data () {

 return {

  animating: false,

  animeObjs: []

 }

 },

 methods: {

 scaleIn (selector = &#39;#bubble&#39;, {duration = 800, easing = &#39;linear&#39;} = {}) {

  // this.animeObjs.push(anime().finished)

 },

 fadeOut (selector = &#39;#bubble&#39;, {duration = 300, easing = &#39;linear&#39;} = {}) {

  // ...

 },

 resetAnimeObjs () {

  this.animeObjs.reset()

  this.animeObjs = []

 },

 animate (action, thenReset) {

  return this[action]().then(() => {

  this.resetAnimeObjs()

  })

 }

 }

}

登入後複製

最初的想法是,在 router config 裡面為特定路由 meta 新增標記,beforeEach 的時候判斷判斷該標記執行動畫。但這種做法不夠靈活,改成透過 Hash 來標記,結合 Vue-router,切換時重置 hash。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<router-link class="router-link" to="/#__bubble__transition__">Home</router-link>

const BUBBLE_TRANSITION_IDENTIFIER = &#39;__bubble__transition__&#39;

router.beforeEach((to, from, next) => {

 if (to.hash.indexOf(BUBBLE_TRANSITION_IDENTIFIER) > 0) {

 const redirectTo = Object.assign({}, to)

 redirectTo.hash = &#39;&#39;

 BubbleTransition.scaleIn()

  .then(() => next(redirectTo))

 } else {

 next()

 }

})

router.afterEach((to, from) => {

 BubbleTransition.fadeOut()

})

登入後複製

酷炫的動畫能在一瞬間抓住用戶的眼球,我自己也經常在逛一些網站的時候發出,wocao,太酷了! ! !的感嘆。可能最終的實作用不了幾行程式碼,自己多動手實現一下,下次設計師提出不合理的動畫需求時可以裝逼,這種效果我分分鐘能做出來,但是我認為這裡不應該使用**動畫,不符合使用者的心理預期啊。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

自己動手打造ajax圖片上傳

ajax 傳回值自動新增pre標籤的解決方法

ajax使用不同namespace的action的方法

以上是Vue 頁面切換效果之 BubbleTransition的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板