Zusammenfassung der Anwendung von Übergangskomponenten in Vue-Projekten

​Transtion in Vue ist eine Kapselungskomponente für Animationsübergänge. Ein häufiges Szenario ist, dass das mit dem Transition-Tag umschlossene DOM Animationseffekte enthält. Die Übergangseinstellungen für Animationseffekte der Übergangskomponente basieren auf den Übergangseigenschaftseinstellungen von CSS. Hier werde ich die Anwendung von Übergangskomponenten in Vue im Projekt vorstellen.

Einzelne Popup-Anwendung

Beachten:

• Der Name des Namens ist identisch mit dem Anfang der folgenden Stilklasse.
• Verwenden Sie v-if, um bei der Ausführung von Animationseffekten zusammenzuarbeiten

<Vorlage>
  <div>
  <button v-on:click="anzeigen = !anzeigen">
    Umschalten
  </button>
  <Übergangsname="Überblenden">
    <p v-if="show">hallo</p>
  </Übergang>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      zeigen: wahr
    }
  },
}
</Skript>

<style scoped lang="weniger">
.fade-enter-active,
.fade-leave-active {
  Übergang: alle 0,5 s;
}
 .fade-verlassen-zu {
  Deckkraft: 0;
  transformieren: übersetzenX(20px);
}
.fade-enter{
  Deckkraft: 0;
  transformieren: übersetzenX(-20px);
}
</Stil>

Effekt der Inhaltsumschaltungssteuerung

Beachten:

1. Schlüssel: kann ein beliebiger Wert sein und der Animationswechsel wird durch den Wechsel des Schlüsselwerts gesteuert. Die Komponenten können beliebig sein und unverändert bleiben. Es liegt an Ihnen, ob Sie Änderungen vornehmen oder nicht. Sie können das Komponenten-Tag mit „is“ verwenden oder direkt v-if verwenden.
2. Die an die Taste gebundene Komponente muss auf absolute Positionierung eingestellt werden, da es sonst beim Umschalten zu einer Verzögerung kommt. Sie können auch mode="out-in" oder mode="in-out" nacheinander setzen. Es hängt von Ihren persönlichen Bedürfnissen ab.

<Vorlage>
  <div>
    <Übergangsname="Überblenden">
      <button class="position" @click="ändern" :key="status">
        Komponente</button>
    </Übergang>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      Status: '1',
    }
  },
  Methoden: {
    ändern () {
      wenn(dieser.docState === '1'){
        dieser.docState = "2"
      }anders{
        dieser.docState = "1"
      }
    }
  }
}
</Skript>

<style scoped lang="weniger">
.fade-enter-active,
.fade-leave-active {
  Übergang: alle 0,5 s;
}
 .fade-verlassen-zu {
  Deckkraft: 0;
  transformieren: übersetzenX(20px);
}
.fade-enter{
  Deckkraft: 0;
  transformieren: übersetzenX(-20px);
}
.Position{
  Position: absolut;
}
</Stil>

Verwendung mit Animate Framework

Beachten

• Der Wert von Name muss wie folgt festgelegt werden: custom-classes-transition
• enter-active-class, leave-active-class zur Steuerung der Erscheinungs- und Verschwindensstile

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="externes nofollow" rel="stylesheet" type="text/css">

<div id="Beispiel-3">
  <button @click="anzeigen = !anzeigen">
    Render ein-/ausblenden
  </button>
  <Übergang
    Name="benutzerdefinierter-Klassen-Übergang"
    enter-active-class="animiert, tada"
    leave-active-class="animiertes BounceOutRight"
  >
    <p v-if="show">hallo</p>
  </Übergang>
</div>

Die Seite wird zum ersten Mal geladen und die Animation ausgeführt

Hinzufügen von „Erscheinen“ zum Übergang

Dies ist das Ende dieses Artikels über die Anwendung von Übergangskomponenten in Vue-Projekten. Weitere relevante Inhalte zu Übergangskomponenten in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!