So implementieren Sie die Übergangsanimation von Vuejs
Übergangsanimationen können durch das Übergangselement in vuejs erreicht werden. Es verfügt über sechs Klassen, die auf Tags angewendet werden können, um eingehende bzw. verlassende Übergänge zu verarbeiten.
VueJS (Vue.js) kann als a bezeichnet werden Sehr gutes Frontend-Javascript-Framework. Es ist einfach zu verwenden, zu erweitern und an unsere Bedürfnisse anzupassen. Insbesondere die Übergangsfunktion in vue.js, die den Animationsprozess zum Kinderspiel macht. Als nächstes werden wir in diesem Artikel detailliert vorstellen, wie die Übergangsanimation von vue.j implementiert wird. Es hat einen gewissen Referenzwert und ich hoffe, dass es für alle hilfreich sein wird
[Empfohlene Kurse: vue.js-Tutorial]
Es gibt ein
Im Fall von CSS-Übergängen < ; Das Übergangselement ist für das Anwenden und Aufheben der Anwendung von Klassen verantwortlich. Wir müssen lediglich definieren, wie das Element während des Übergangs aussehen soll
Die Syntax lautet wie folgt:
<transition name = "nameoftransition"> <div></div> </transition>
Übergangselemente wenden sechs Klassen auf Ihr Markup an , Sie können sie verwenden, um Ihre Ein- und Austrittsübergänge separat zu behandeln. Es gibt drei Klassen, die die Konvertierung von A nach B durchführen, wenn das Element angezeigt wird, und drei Klassen, die die Konvertierung von A nach B übernehmen, wenn das Element entfernt wird.
Eingabeübergänge treten auf, wenn eine Komponente aktiviert oder angezeigt wird: v-enter, v-enter-active, v-enter-to
v-enter: Zeigt den Eintrag an Übergang zum Ausgangszustand. Wird beim nächsten Frame entfernt, nachdem das Element eingefügt wurde
v-enter-active: zeigt den Zustand an, in dem der Übergang wirksam ist, wird entfernt, nachdem die Animation abgeschlossen ist
v-enter-to: tritt in den Übergang ein Der Endzustand, der nach Abschluss der Animation entfernt wird
Der Verlassensübergang erfolgt, wenn die Komponente deaktiviert oder entfernt wird: v-leave, v-leave-active und v-leave-to
v-leave: Zeigt den Startzustand des Verlassensübergangs an und der nächste Frame wird entfernt
v-leave-active: Zeigt den Zustand beim Verlassensübergang an wird während der gesamten Verlassensübergangsphase wirksam. Wird angewendet in , wird nach Abschluss des Übergangs/der Animation entfernt. Diese Klasse kann verwendet werden, um die Prozesszeit, Verzögerung und Kurvenfunktion des Ausgangsübergangs zu definieren
v-leave-to: Stellt den Endzustand des Ausgangsübergangs dar, der nach Abschluss des Übergangs/der Animation entfernt wird
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> </title>
<script src="https://vuejs.org/js/vue.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .5s ease;
}
.slide-fade-leave-active {
transition: all 3s linear;
font-size:30px;
background-color: pink;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 用于 2.1.8 以下版本 */ {
transform: translateX(40px);
opacity:0.2;
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name="slide-fade">
<p v-if="show">php中文网</p><!-- 为true就显示，不是true就不显示 -->
</transition>
</div>
<script type = "text/javascript">
new Vue({
el: '#databinding',
data: {
show: true
}
})
</script>
</body>
</html>Rendering:
Zusammenfassung: Das Obige ist der gesamte Inhalt In diesem Artikel hoffe ich, dass dieser Artikel jedem dabei helfen kann, das Erstellen von Übergangsanimationen mit vue.js zu erlernen
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Übergangsanimation von Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
CSS-Tipp: Verwenden Sie den Übergang, um den Hover-Status beizubehalten
Sep 27, 2022 pm 02:01 PM
Wie kann der Schwebezustand beibehalten werden? Im folgenden Artikel erfahren Sie, wie Sie den Hover-Status beibehalten, ohne JavaScript zu verwenden. Ich hoffe, er hilft Ihnen weiter!
Wie implementiert man Bildanimationen und Verlaufseffekte in Vue?
Aug 18, 2023 pm 06:00 PM
Wie implementiert man Bildanimationen und Verlaufseffekte in Vue? Vue ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen, mit dem sich Animationen und Verlaufseffekte einfach implementieren lassen. In diesem Artikel stellen wir vor, wie Sie mit Vue Bildanimationen und Verlaufseffekte implementieren, und stellen einige Codebeispiele bereit. 1. Verwenden Sie die Übergangseffekte von Vue, um Bildanimationen zu implementieren. Vue bietet integrierte Anweisungen für Übergangseffekte, die das Hinzufügen von Animationseffekten zu HTML-Elementen erleichtern. Wenn Sie Übergangseffekte verwenden, können Sie Bildelemente umbrechen und den Elementen Übergangsanweisungen hinzufügen. Beispiel
Eigenschaften der CSS-Verlaufsanimation: Übergang und Hintergrundbild
Oct 27, 2023 pm 01:18 PM
Eigenschaften der CSS-Verlaufsanimation: Übergang und Hintergrundbild Im Webdesign können Animationseffekte der Seite Lebendigkeit und Attraktivität verleihen. CSS bietet viele Eigenschaften zum Erstellen von Animationseffekten, einschließlich der Verlaufsanimationseigenschaften „übergang“ und „Hintergrundbild“. In diesem Artikel werden diese beiden Eigenschaften ausführlich vorgestellt und spezifische Codebeispiele gegeben. Übergangsattribut Das Übergangsattribut wird verwendet, um Elemente in a zu implementieren
Übergangsfunktion in Vue3: Animierten Übergang von Komponenten implementieren
Jun 18, 2023 pm 04:20 PM
Übergangsfunktion in Vue3: Animierte Übergänge von Komponenten implementieren Vue3 ist derzeit eines der beliebtesten JavaScript-Frameworks. Es bietet umfassende Tools zur Lösung der Konstruktionsprobleme von Front-End-Anwendungen. Unter diesen ist die Übergangsfunktion eine der sehr leistungsstarken und nützlichen Funktionen, die uns helfen können, den animierten Übergang von Komponenten zu realisieren. In diesem Artikel stellen wir die Übergangsfunktion ausführlich vor und erklären, wie man sie in Vue3-Anwendungen verwendet. Übergang
So verwenden Sie die Übergangskomponente, um animierte Übergangseffekte in Vue zu erzielen
Jun 11, 2023 am 10:49 AM
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 in Vue animierte Übergangseffekte erzielen. 1. Grundkenntnisse Bevor Sie die Übergangskomponente von Vue verwenden können, müssen Sie zunächst V verstehen
So nutzen Sie den Übergang und die Animation von Vue, um die Animationsleistung Ihrer Anwendung zu verbessern
Jul 17, 2023 am 08:24 AM
So nutzen Sie den Übergang und die Animation von Vue, um die Animationsleistung Ihrer Anwendung zu verbessern. Einführung: In modernen Webanwendungen ist Animation zu einem wichtigen Teil der Benutzererfahrung geworden. Als beliebtes Front-End-Entwicklungsframework bietet das Vue-Framework eine Reihe leistungsstarker Animationseffekte und interaktiver Funktionen. In diesem Artikel wird vorgestellt, wie Sie die Übergangs- und Animationsfunktionen von Vue verwenden, um die Animationsleistung der Anwendung zu verbessern, und entsprechende Codebeispiele geben. 1. Transitio von Vue
Übergangskomponente in Vue3: Implementierung von Komponentenübergangseffekten
Jun 18, 2023 am 08:31 AM
Übergangskomponente in Vue3: Implementierung von Komponentenübergangseffekten Vue3 ist eine brandneue Version, die kürzlich veröffentlicht wurde und viele Verbesserungen in Bezug auf Leistung und Entwicklungserfahrung mit sich gebracht hat. Gleichzeitig bietet Vue3 auch mehr Features und Funktionen. Eine der wichtigen Funktionen ist die Übergangskomponente. In Vue3 kann die Übergangskomponente verwendet werden, um den Übergangseffekt von Komponenten zu implementieren und dadurch die Benutzeroberfläche reichhaltiger und lebendiger zu gestalten. Was ist eine Übergangskomponente? In Vue3, transi
Detaillierte Erläuterung der CSS-Bildübergangseigenschaften: Übergang und Hintergrundbild
Oct 22, 2023 am 08:06 AM
Detaillierte Erläuterung der CSS-Bildübergangseigenschaften: Übergang und Hintergrundbild Einführung: Im modernen Webdesign sind Übergangseffekte eine wichtige Technologie zur Verbesserung des Benutzerinteraktionserlebnisses. Unter anderem spielen Bildübergangseffekte eine wichtige Rolle bei der Verschönerung von Webseiten und der Verbesserung der Benutzererfahrung. In diesem Artikel werden zwei häufig verwendete Bildübergangseigenschaften, Übergang und Hintergrundbild, ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern das Verständnis und die Anwendung dieser Eigenschaften zu erleichtern. 1. tran
