So verwenden Sie die Übergangskomponente, um animierte Übergangseffekte in Vue zu erzielen

Vue ist ein beliebtes JavaScript-Framework, das viele nützliche Komponenten enthält, die Entwicklern helfen, Front-End-Anwendungen effizienter zu erstellen. Unter anderem kann die Vue-eigene Übergangskomponente verwendet werden, um animierte Übergangseffekte zu erzielen, die die Interaktion mit der Anwendung flüssiger und lebendiger machen können. Als Nächstes wird in diesem Artikel erläutert, wie Sie mit der Übergangskomponente animierte Übergangseffekte in Vue erzielen.

1. Grundkenntnisse

Bevor Sie die Übergangskomponente von Vue verwenden, müssen Sie einige Grundkenntnisse in Vue verstehen. Die wichtigsten davon sind Hook-Funktionen, also Funktionen im Vue-Komponentenlebenszyklus, die beim Rendern und Aktualisieren von Komponenten ausgelöst werden. Die Übergangskomponente kann diese Hook-Funktionen verwenden, um Übergangseffekte zu erzielen.

Eine weitere Sache, die Sie wissen sollten, ist der Name der CSS-Übergangsklasse in Vue. Vue bietet mehrere CSS-Klassennamen, über die Animationsübergangseffekte festgelegt werden können. Zu seinen Namen gehören: v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active und v-leave-to. Diese Klassennamen entsprechen den Übergangszuständen beim Betreten und Verlassen, und relevante Stile können in CSS festgelegt werden, um Animationseffekte zu erzielen.

2. Grundlegende Verwendung

Die grundlegende Syntax der Verwendung der Übergangskomponente ist sehr einfach. Fügen Sie zunächst das Übergangs-Tag zur Vorlage hinzu, umschließen Sie dann die zu übergehenden Elemente und fügen Sie dann nach Bedarf Elemente über die integrierten Vue-Anweisungen v-if oder v-show hinzu oder entfernen Sie sie.

Im folgenden Code verpacken wir beispielsweise ein div-Element in ein Übergangstag und verwenden die v-if-Direktive, um das Element zu steuern:

<template>
  <div>
    <transition>
      <div v-if="show">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

Im obigen Beispiel binden wir eine Toggle-Methode an die Schaltfläche, wenn die Wenn Sie auf die Schaltfläche klicken, wird der Wert von show invertiert, sodass das Element entsprechend dem Wert von show angezeigt oder ausgeblendet wird.

3. Verwendung der Hook-Funktion

Obwohl das obige Beispiel eine grundlegende Verwendung zeigt, wird damit kein Animationseffekt erzielt. Um den Übergangseffekt zu erzielen, müssen Sie einige von Vue bereitgestellte Hook-Funktionen verwenden, um die verschiedenen Zustände des Übergangs zu steuern.

Zu diesen Hook-Funktionen gehören: „Before-Enter“, „Enter“, „After-Enter“, „Enter-Cancelled“, „Before-Leave“, „Leave“, „After-Leave“ und „Leave-Cancelled“. Diese Hook-Funktionen werden zu unterschiedlichen Zeiten ausgelöst, wenn Elemente ein- oder ausgehen. Wir können den entsprechenden CSS-Übergangsklassennamen in diesen Hook-Funktionen festlegen, um den Animationsübergangseffekt auszulösen.

Das Folgende ist ein einfacher Übergangseffekt, der auf Hook-Funktionen basiert:

<template>
  <div>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled">
      <div :key="isShown">Hello world!</div>
    </transition>
    <button @click="toggle">Toggle visibility</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShown: true
    }
  },
  methods: {
    toggle() {
      this.isShown = !this.isShown
    },
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      Velocity(el, { opacity: 1 }, { duration: 500 })
      done()
    },
    afterEnter(el) {
      el.style.opacity = ''
    },
    enterCancelled(el) {
      el.style.opacity = ''
    },
    beforeLeave(el) {
      el.style.opacity = 1
    },
    leave(el, done) {
      Velocity(el, { opacity: 0 }, { duration: 500 })
      done()
    },
    afterLeave(el) {
      el.style.opacity = ''
    },
    leaveCancelled(el) {
      el.style.opacity = ''
    }
  }
}
</script>

<style>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s;
}
</style>

Im obigen Code haben wir eine Reihe von Hook-Funktionen gebunden und die Velocity.js-Bibliothek eingeführt, um den Animationseffekt zu vervollständigen. Wir verarbeiten Elemente in diesen Hook-Funktionen unterschiedlich und erzielen komplexe Übergangseffekte durch das Setzen unterschiedlicher CSS-Klassen.

Darüber hinaus müssen wir dem Stylesheet einige CSS-Stile hinzufügen, um verschiedene Übergangsanimationseffekte festzulegen. Im obigen Code wird der Animationseffekt des Transparenzverlaufs durch Festlegen der Opazitätseigenschaft erreicht.

4. Fazit

Dieser Artikel stellt die grundlegende Verwendung der Übergangskomponente in Vue und die Verwendung von Hook-Funktionen vor. Mit diesen Methoden können wir komplexe Animationseffekte erzielen und die Anwendungsinteraktion lebendiger und reibungsloser gestalten. Es ist zu beachten, dass bei Übergangseffekten Benutzererfahrung und Seitenleistung berücksichtigt werden müssen und die Übergangszeit nicht zu lang sein sollte, um die Seitenladegeschwindigkeit nicht zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Übergangskomponente, um animierte Übergangseffekte in Vue zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!