So implementieren Sie den CSS-Übergangseffekt mit Vue

In diesem Artikel wird hauptsächlich das CSS-Übergangseffektbeispiel von Web-Front-End-Vue vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

Die Bedeutung von Übergangseffekten im interaktiven Erlebnis liegt auf der Hand. In der Vergangenheit haben wir js oder Jquery verwendet, um die Klasse von Elementen in Kombination mit den in CSS definierten Stilen hinzuzufügen und nach Referenzierung einiger Javascript-Bibliotheken sehr komplexe und beeindruckende dynamische Effekte zu erzeugen. Diese Methode ist jedoch immer noch zu empfehlen umständlich.

vue.js verfügt über ein integriertes Übergangssystem, das automatisch Übergangseffekte anwenden kann, wenn Elemente in das DOM eingefügt oder daraus entfernt werden. Vue löst zum richtigen Zeitpunkt einen CSS-Übergang oder eine CSS-Animation aus. Sie können auch entsprechende Javascript-Hook-Funktionen bereitstellen, um während des Übergangsprozesses benutzerdefinierte DOM-Operationen durchzuführen.

Jeder Übergangseffekt muss das Übergangsattribut für das Zielelement verwenden.

<p v-if="show" transition="my-style">显示</p>

Die Übergangsfunktion kann mit den folgenden Anweisungen verwendet werden:

1.v-wenn 2.v-zeigen 3.v-für 4. Dynamische Komponenten

Auch Es gibt weitere Anleitungen oder Ressourcen, die Sie selbst finden können.

Das vollständige Codebeispiel lautet wie folgt:

<p v-if="show" :transition="expand"></p>  // expand必需事先定义好，expand后面写样式要用（关键）
<transition name="expand"><p v-if="show">显示</p></transition>这样的嵌套也可以

.expand-transition { // 必需写
 transition: all .3s ease; 
 height: 30px; 
 padding: 10px;
 background-color: #eee;
 overflow: hidden;
}

.expand-enter{ //开始进入过渡，元素被插入生效
 transition:opacity .5s;
} 
.fade-leave-active { // 结束状态
 opacity:0;
}

Natürlich gibt es einen Anfangs- und einen Endzustand. Es gibt tatsächlich vier (CSS-Klassen-)Namen, die zwischen Enter/Leave wechseln Staaten.

1.v-enter: Definiert den Startzustand des Übergangs, wird wirksam, wenn das Element eingefügt wird, und wird im nächsten Frame entfernt

2.v-enter-active: Definiert der Eingangszustand des Übergangs. Der Endzustand wird wirksam, wenn das Element eingefügt wird, und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist

3.v-leave: definiert den Startzustand des Ausgangsübergangs, wird wirksam wenn der Verlassensübergang ausgelöst wird, und bewegt sich in den nächsten Frame Außer

4.v-leave-active: Definieren Sie den Startzustand des Verlassensübergangs, der wirksam wird, wenn der Verlassensübergang ausgelöst wird

Im nächsten Frame kann es abgeschlossen werden. Schreiben Sie einen CSS-Übergangseffekt, z. B. das Verschieben der Seite in das Feld von der linken Seite des Fensters.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erstellen Sie element-ui (detailliertes Tutorial)

So definieren Sie Ihr eigenes Element-UI basierend auf ng-alain in der Winkelauswahlkomponente?

So ändern Sie den Standardstil in elementui

Verwenden Sie elementUI, um benutzerdefinierte Designmethoden in Vue zu implementieren

Detaillierte Interpretation des Tutorials zur Verwendung der Zeichenbibliothek von plotly.js (ausführliches Tutorial)

Wie ändere ich den Standardstil in Elementui?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den CSS-Übergangseffekt mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!