Maison > interface Web > js tutoriel > le corps du texte

Vue+BubbleTransition obtient facilement un effet de changement de page

php中世界最好的语言
Libérer: 2018-05-26 14:16:26
original
1725 Les gens l'ont consulté

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')
 }
}
Copier après la connexion

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()
  })
 }
 }
}
Copier après la connexion

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()
})
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!