BubbleTransition によるページ切り替え機能の実装方法-jsチュートリアル-php.cn

BubbleTransition によるページ切り替え機能の実装方法

php中世界最好的语言

リリース： 2018-05-02 09:43:02

オリジナル

1483 人が閲覧しました

今回は、BubbleTransition がページ切り替え機能を実装する方法について説明します。 BubbleTransition がページ切り替え機能を実装するための注意事項は何ですか?

CodePen アドレス

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

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

手順

メニューをクリックしてバブルを生成し、入口アニメーションの実行を開始
ページジャンプ
出口アニメーションを実行

機能呼び出しコンポーネント

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()
})

ログイン後にコピー

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

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

推奨読書:

vue-i18nの標準的な使用手順

Vueの無限ロードvue-infinite-loadingの使用方法の詳細

vue-infinite-loading2.0の使用手順

以上がBubbleTransition によるページ切り替え機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。