Wie BubbleTransition die Seitenwechselfunktion implementiert

Dieses Mal zeige ich Ihnen, wie BubbleTransition die Seitenwechselfunktion implementiert. Was sind die Vorsichtsmaßnahmen für BubbleTransition, um die Seitenwechselfunktion zu implementieren?

CodePen-Adresse

Nachdem Sie SPA im Frontend verwendet haben, können Sie mehr Kontrolle erlangen, z. B. Seitenwechselanimationen. Dies ist möglicherweise nicht möglich Der obige Effekt ist offensichtlich, wenn Back-End-Seiten verwendet werden, oder es wird ein offensichtlicher Begrüßungsbildschirm angezeigt. Weil alle Ressourcen neu geladen werden müssen.

Heute verwenden wir Vue, Vue-Router und AnimeJS, um zu erklären, wie der oben genannte Effekt erzielt werden kann.

Schritte

1. Klicken Sie auf das Menü, um eine Blase zu generieren und mit der Ausführung der Eingangsanimation zu beginnen

2. Seitensprung

3. Exit-Animation ausführen

Funktionale Aufrufkomponente

Ich hoffe, dass der Effekt über ein Objekt aufgerufen wird, anstatt über Anweisungen wie v-show, v-if, und um die Einheitlichkeit aufrechtzuerhalten, habe ich immer noch Verwenden Sie Vue, um Komponenten zu schreiben. Normalerweise setze ich dies mit einem neuen Vue-Root-Knoten um, um den Effekt unabhängig von den Geschäftskomponenten zu halten.

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

Dann implementieren Sie BubbleTransitionComponent, dann funktionieren BubbleTransition.scaleIn und BubbleTransition.scaleOut normal. Endereignisse der Animationsausführung, die AnimeJS abhören können. anime().finished ruft das Promise-Objekt ab.

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

Die ursprüngliche Idee besteht darin, ein Tag zu einem bestimmten Routenmeta in der Router-Konfiguration hinzuzufügen und dann das Tag zu beurteilen, um während beforeEach eine Animation durchzuführen. Diese Methode ist jedoch nicht flexibel genug, sondern wird durch Hash markiert, kombiniert mit Vue-Router, und der Hash wird beim Umschalten zurückgesetzt.

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

Coole Animationen können die Aufmerksamkeit des Benutzers im Handumdrehen erregen. Ich selbst sage oft, wocao, so cool, wenn ich auf manchen Websites surfe! ! ! seufzen. Vielleicht erfordert die endgültige Implementierung nicht mehr als ein paar Zeilen Code. Wenn der Designer das nächste Mal unangemessene Animationsanforderungen stellt, kann ich diesen Effekt in wenigen Minuten erzielen Ich denke nicht, dass es hier verwendet werden sollte** Die Animation entspricht nicht den psychologischen Erwartungen des Benutzers.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Schritte zur Standardnutzung von Vue-i18n

Ausführliche Erklärung zur Verwendung von Vue Infinite Loading und Vue-Infinite-Loading

vue-infinite-loading2.0 Gebrauchsanweisung

Das obige ist der detaillierte Inhalt vonWie BubbleTransition die Seitenwechselfunktion implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!