So verwenden Sie Übergangsklassennamen, um Animationsübergangseffekte in Vue zu erzielen

Vue ist ein beliebtes JavaScript-Framework, das die Entwicklung von Webanwendungen vereinfachen soll. Unter diesen ist der Name der Übergangsklasse ein sehr wichtiges Merkmal, das es uns ermöglicht, Übergangsanimationseffekte beim Hinzufügen, Entfernen und anderen Verhaltensweisen von DOM-Elementen zu erzielen. In diesem Artikel erfahren Sie, wie Sie Übergangsklassennamen in Vue verwenden, um unseren Webanwendungen ein umfassenderes Animationserlebnis zu verleihen.

Wie lautet der Name der Vue-Übergangsklasse?

Der Übergangsklassenname in Vue ist eine Reihe von CSS-Klassennamen, die in der Vue-Bibliothek definiert sind. Diese Klassennamen stellen einige vordefinierte CSS-Übergangsanimationseffekte bereit, z. B. Einblenden, Ausblenden, Vergrößern, Verkleinern usw. Im Namen der Übergangsklasse von Vue können wir die folgenden Schlüsselwörter verwenden:

• v-enter: der Anfangszustand, bevor das DOM-Element eingefügt wird.
• v-enter-active: Der Animationsausführungsprozess nach dem Einfügen des DOM-Elements.
• v-enter-to: Der Beendigungsstatus nach dem Einfügen des DOM-Elements.
• v-leave: Der Anfangszustand des DOM-Elements, bevor es entfernt wird.
• v-leave-active: Der Animationsausführungsprozess, nachdem das DOM-Element entfernt wurde.
• v-leave-to: Der Beendigungsstatus, nachdem das DOM-Element entfernt wurde.

Diese Klassennamen erleichtern das Hinzufügen und Entfernen von Animationseffekten zu DOM-Elementen, insbesondere in den Listen und beim bedingten Rendering von Vue.

So verwenden Sie Vue-Übergangsklassennamen

In Vue können wir über die Direktive v-bind und v-on ganz einfach Übergangsklassennamen zu Elementen hinzufügen. Im Folgenden stellen wir vor, wie Sie diese beiden Anweisungen in Vue verwenden.

Verwenden Sie die v-bind-Direktive, um einen Übergangsklassennamen hinzuzufügen.

Mit der v-bind-Direktive können wir ein Objekt an ein Element binden und über das Objekt einen Übergangsklassennamen hinzufügen. Um den Übergangseffekt zu erzielen, müssen wir dem Element ein Schlüsselattribut hinzufügen, das eindeutig sein sollte, damit Vue den Status des Elements verfolgen kann. Zum Beispiel der folgende Code:

<template>
  <div>
    <transition name="fade">
      <p v-if="show" key="message">Hello World!</p>
    </transition>
    <button v-on:click="toggleShow">Toggle</button>
  </div>
</template>

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

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

Im obigen Code verwenden wir die Übergangskomponente von Vue, um den Übergangseffekt zu aktivieren. In der Übergangskomponente definieren wir einen Übergang mit dem Namen „fade“, damit wir .fade-enter, .fade-enter-active, .fade-enter-to, .fade-leave, .fade in CSS -leave-active verwenden können , .fade-leave-to diesen Klassennamen. Wir verwenden die v-if-Direktive für das p-Element, um zu steuern, ob es angezeigt wird, und verwenden das Schlüsselattribut, um seinen Status zu verfolgen. In CSS definieren wir zwei Klassennamen fade-enter-active und fade-leave-active, mit denen die Ausführungszeit der Übergangsanimation festgelegt wird. Die Funktionen „fade-enter“ und „fade-leave-to“ bestehen darin, den Anfangs- und Endzustand von Elementen beim Einfügen bzw. Entfernen anzugeben.

Verwenden Sie die v-on-Direktive, um einen Übergangsklassennamen hinzuzufügen.

Mit der v-on-Direktive können wir dem Element durch Ereignisüberwachung einen Übergangsklassennamen hinzufügen. Zum Beispiel der folgende Code:

<template>
  <div>
    <transition name="scale">
      <button v-if="visible" v-on:click="hide">Hide</button>
    </transition>
    <button v-else v-on:click="show">Show</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
    }
  },
  methods: {
    show() {
      this.visible = true;
    },
    hide() {
      this.visible = false;
    },
  },
}
</script>

<style>
.scale-enter-active, .scale-leave-active {
  transition: transform .5s;
}
.scale-enter, .scale-leave-to {
  transform: scale(0);
}
</style>

Im obigen Code verwenden wir die v-on-Direktive, um das Klickereignis so zu binden, dass die Schaltfläche angezeigt oder ausgeblendet wird. Wenn die Schaltfläche angezeigt wird, verwenden wir die Übergangskomponente von Vue, um ihr einen Übergangseffekt namens „Skalierung“ hinzuzufügen. In CSS definieren wir zwei Klassennamen: .scale-enter-active und .scale-leave-active, die zur Steuerung der Ausführungszeit der Übergangsanimation verwendet werden. Wir definieren außerdem zwei Klassennamen: .scale-enter und .scale-leave-to, die verwendet werden, um den Anfangs- und Endzustand von Elementen anzugeben, wenn sie eingefügt und entfernt werden.

Zusammenfassung

Vues Übergangsklassenname bietet eine einfache und leistungsstarke Möglichkeit, Übergangsanimationseffekte von DOM-Elementen zu erzielen. Wir können die Anweisungen v-bind und v-on verwenden, um diese Klassennamen an Elemente zu binden und die Übergangseffekte der Elemente über CSS zu steuern. Wenn Sie mit den Übergangsklassennamen und Animationseffekten von Vue nicht vertraut sind, wird empfohlen, mehr Übungen und Experimente durchzuführen, damit Sie die Übergangsklassennamen von Vue besser beherrschen.

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