Vue+BubbleTransition obtient facilement un effet de changement de page

Cette fois, je vais vous présenter Vue+BubbleTransition pour obtenir facilement l'effet de changement de page. Quelles sont les précautions pour Vue+BubbleTransition pour obtenir l'effet de changement de page. Voici 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'action 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 et v-if. Afin de maintenir l'uniformité, j'utilise toujours 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 :

Comment utiliser js pour obtenir la valeur ModelAndView

Comment utiliser la requête axios vue-cli méthode et traitement inter-domaines

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!