VUE3-Grundlagen-Tutorial: Verwenden von Vue.js-Übergängen und -Animationen

Vue.js ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen, bei dem die Implementierung von Übergängen und Animationen sehr praktisch ist. In diesem Artikel erfahren Sie, wie Sie Vue.js-Übergänge und -Animationen verwenden, einschließlich der Gestaltung und Auslösung von Übergangsereignissen.

Übergang

In Vue.js bezieht sich Übergang auf das Hinzufügen von Animationseffekten zu Elementen, wenn diese eingefügt, aktualisiert oder entfernt werden. Vue.js implementiert den Übergang durch die V-Transition-Direktive und die Übergangskomponente.

v-transition-Direktive

v-transition-Direktive löst den entsprechenden Übergangseffekt aus, wenn ein Element eingefügt, aktualisiert oder entfernt wird. Übergangseffekte können durch Festlegen des Übergangsklassennamens definiert werden. Beispielsweise können wir einblenden, wenn ein Element eingefügt wird, und ausblenden, wenn es entfernt wird:

<div v-transition="'fade'">
  {{ message }}
</div>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

Im obigen Beispiel haben wir den Klassennamen .fade definiert, um den Übergangseffekt des Elements darzustellen. In den Klassen .fade-enter und .fade-leave-to setzen wir das Opazitätsattribut auf 0 und geben damit den Start- und Endstatus des Elements an, wenn es eingefügt und entfernt wird. In den Klassen .fade-enter-active und .fade-leave-active legen wir das Übergangsattribut fest, um den Zeitpunkt anzugeben, zu dem der Übergang wirksam wird.

Übergangskomponente

Übergangskomponente kann die Verwendung von V-Übergängen vereinfachen. Platzieren Sie einfach das Element, das Sie überführen möchten, in der Übergangskomponente. Beispielsweise können wir unterschiedliche Komponentennamen verwenden, um Eintritts-, Austritts- und gleichzeitige Übergangseffekte zu definieren:

<transition enter-active-class="fadeIn" leave-active-class="fadeOut">
  <div v-show="showDiv">{{ message }}</div>
</transition>

.fadeIn-enter-active, .fadeOut-leave-active {
  transition: opacity .5s;
}

.fadeIn-enter, .fadeOut-leave-to {
  opacity: 0;
}

.fadeOut-leave, .fadeIn-enter-to {
  opacity: 1;
}

Im obigen Beispiel verwenden wir die Übergangskomponente, um die Einrichtung des Übergangseffekts zu vereinfachen. Durch Festlegen der Eigenschaften „enter-active-class“ und „leave-active-class“ definieren wir die Übergangseffekte für das Betreten und Verlassen. Gleichzeitig definieren wir den Start- und Endstatus des Elements, indem wir die Klassennamen Ein- und Ausblenden festlegen.

Animation

In Vue.js bezieht sich Animation auf das Hinzufügen von Animationseffekten zu Elementen, wenn diese nicht eingefügt, aktualisiert oder entfernt werden. Vue.js implementiert Animationen durch V-Animationsanweisungen und Animationskomponenten.

v-animation-Direktive

v-animation-Direktive löst den entsprechenden Animationseffekt aus, wenn das Element nicht eingefügt, aktualisiert oder entfernt wird. Animationseffekte können durch Festlegen des Namens der Animationsklasse definiert werden. Beispielsweise können wir das Element skalieren, wenn wir mit der Maus darüber fahren:

<div v-animation="'hoverScale'">
  {{ message }}
</div>

.hoverScale {
  transform: scale(1);
}

.hoverScale:hover {
  transform: scale(1.5);
}

Im obigen Beispiel haben wir den Klassennamen .hoverScale definiert, um den Animationseffekt des Elements darzustellen. In der .hoverScale-Klasse legen wir das Transformationsattribut fest, um anzugeben, dass der Anfangszustand des Elements seine ursprüngliche Größe hat. In der Klasse .hoverScale:hover legen wir die Transformationseigenschaft auf eine 1,5-fache Vergrößerung fest, um den Endzustand des Elements anzuzeigen.

Animationskomponente

Animationskomponente kann die Verwendung von V-Animation vereinfachen. Platzieren Sie einfach das Element, das Sie animieren möchten, in der Animationskomponente. Beispielsweise können wir unterschiedliche Komponentennamen verwenden, um unterschiedliche Animationseffekte zu definieren:

<animation name="rotate">
  <div>{{ message }}</div>
</animation>

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

.rotate {
  animation: rotate 1s infinite;
}

Im obigen Beispiel verwenden wir die Animationskomponente, um die Einstellung von Animationseffekten zu vereinfachen. Durch Festlegen des Namensattributs definieren wir den Animationsnamen als Drehen. In der Klasse .rotate legen wir die Animationseigenschaft fest und definieren die Eigenschaften und Dauer der Animation. In @keyframes legen wir den Start- und Endstatus der Animation fest.

Zusammenfassung

Vue.js bietet praktische Übergangs- und Animationsfunktionen, die der Benutzeroberfläche lebendige Effekte hinzufügen können. Mithilfe der v-transition-Direktive und der Übergangskomponente können wir Übergangseffekte definieren, wenn Elemente eingefügt, aktualisiert oder entfernt werden. Mithilfe der v-animation-Direktive und der Animationskomponente können wir Animationseffekte definieren, wenn ein Element nicht eingefügt, aktualisiert oder entfernt wird. Ich hoffe, dass dieses Tutorial Ihnen beim Erlernen von Übergängen und Animationen in Vue.js hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonVUE3-Grundlagen-Tutorial: Verwenden von Vue.js-Übergängen und -Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!