Vue+BubbleTransition で簡単にページ切り替え効果を実現

今回は、ページ切り替え効果を簡単に実現するための Vue+BubbleTransition を紹介します。Vue+BubbleTransition でページ切り替え効果を実現するために使用できる注意点とは何ですか。実際のケースを見てみましょう。

CodePen アドレス

フロントエンドで SPA を使用すると、ページ切り替えアニメーションなどのより詳細な制御が可能になります。バックエンド ページを使用して上記の効果を達成できない場合があります。明らかなスプラッシュ画面。すべてのリソースを再ロードする必要があるためです。

今日は、vue、vue-router、animationjs を使用して、上記の効果を実現する方法を説明します。

ステップ

1. メニューをクリックしてバブルを生成し、エントリアニメーションの実行を開始

2. ページジャンプ

3. 終了アニメーションを実行

願っています均一性を維持するために、エフェクトは 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>
 <p class="transition-bubble">
 <span v-show="animating" class="bubble" id="bubble">
 </span>
 </p>
</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()
  })
 }
 }
}

本来のアイデアは、ルーター設定内の特定のルートメタにタグを追加し、そのタグを判断して beforeEach 中にアニメーションを実行することです。ただし、この方法は十分な柔軟性がありません。代わりに、Vue-router と組み合わせてハッシュによってマークされ、切り替え時にハッシュがリセットされます。

<router-link class="router-link" to="/#bubbletransition">Home</router-link>
const BUBBLE_TRANSITION_IDENTIFIER = 'bubbletransition'
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()
})

クールなアニメーションは、Web サイトを閲覧しているときに、一瞬でユーザーの注意を引くことがあります。 ！ ！はぁ。おそらく、最終的な実装には数行のコードしか必要としないでしょう。次回デザイナーが無理なアニメーション要件を提示した場合は、数分でこの効果を披露できると思います。ここでは使用すべきではないと思います** このアニメーションはユーザーの心理的期待を満たしていません。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

js を使用して ModelAndView 値を取得する方法

vue-cli axios リクエスト メソッドとクロスドメイン処理の使用方法

以上がVue+BubbleTransition で簡単にページ切り替え効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。