Comment utiliser BubbleTransition pour créer des effets de changement de page

Cette fois, je vais vous montrer comment utiliser BubbleTransition pour créer un effet de changement de page. Quelles sont les précautions pour utiliser BubbleTransition pour créer un effet de changement de page. Ce qui suit est un cas pratique, prenons un. regarder.

Adresse CodePen

Après avoir utilisé SPA sur le front-end, vous pouvez obtenir plus de contrôle, comme les animations de changement de page que nous ne pourrons peut-être pas faire. ce qui précède en utilisant des pages principales. L'effet sera évident, ou il y aura un écran de démarrage évident. Parce que toutes les ressources doivent être rechargées.

Aujourd'hui, nous utilisons vue, vue-router et animejs pour expliquer comment obtenir l'effet ci-dessus.

Étapes

1. Cliquez sur le menu pour générer des bulles et commencer à exécuter l'animation d'entrée

2. Saut de page

3. Exécuter l'animation de sortie

Composant d'appel fonctionnel

J'espère que l'effet est appelé via un objet au lieu d'instructions telles que v-show, v-if, et afin de maintenir l'uniformité, je continue utilisez Vue pour écrire des composants. J'implémente généralement cela avec un nouveau nœud racine Vue pour garder l'effet indépendant des composants métier.

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

Ensuite, implémentez BubbleTransitionComponent, puis BubbleTransition.scaleIn, BubbleTransition.scaleOut fonctionnera normalement. Événements de fin d’exécution d’animation que les animejs peuvent écouter. anime().finished obtient l'objet 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()
  })
 }
 }
}

L'idée originale est d'ajouter une balise à une méta de route spécifique dans la configuration du routeur, puis de juger la balise pour effectuer une animation pendant beforeEach. Cependant, cette méthode n'est pas assez flexible, elle est marquée par Hash, combinée avec Vue-router, et le hachage est réinitialisé lors du changement.

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

Des animations sympas peuvent attirer l'attention de l'utilisateur en un instant. Je dis moi-même souvent, wocao, c'est trop cool en naviguant sur certains sites ! ! ! soupir. Peut-être que l'implémentation finale ne nécessitera pas plus de quelques lignes de code. J'essaierai de l'implémenter moi-même. La prochaine fois que le concepteur proposera des exigences d'animation déraisonnables, je pourrai le montrer en quelques minutes, mais je le ferai. je ne pense pas qu'elle devrait être utilisée ici** L'animation ne répond pas aux attentes psychologiques de l'utilisateur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez vue-infinite-loading pour obtenir une fonction de chargement infini

Utilisez vue-i18n pour créer vue code International

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!