Übergangselemente unter einem übergeleiteten v-if

8

Ich habe zwei Elemente, und die Sichtbarkeit der obersten wird von einem v-if auf einem einfachen booleschen Wert gesteuert.

%Vor%

Das erste Element in einer <transition> Tag enthalten, genau wie pro die Vue Dokumentation .

Während dies jedoch eine verblassende Animation erzeugt, springt der Rest des Inhalts auf der Seite immer noch sehr ruckelig.

Wie kann ich einen Übergang erstellen, der auch die Position aller nachfolgenden Geschwister reibungslos transformiert?

Eine Geige demonstriert dieses Problem.

    
Emphram Stavanger 19.01.2017, 14:43
quelle

3 Antworten

3

Sie müssen transition-group verwenden und Ihr dynamisches div und statisches div

eingeben %Vor%

Und benutze diese CSS-Klassen

%Vor%

Der wahre Trick besteht darin, position beim Verlassen auf absolute zu ändern, dann kann jeder andere Inhalt die richtige Position einnehmen.

Um mehr darüber zu erfahren, wie Vue Dinge animiert, sehen Sie sich bitte diesen FLIP-Erklärungsposten

an

Und bitte sehen Sie diese Arbeitsgeige Ссылка

Bearbeiten

Aus Versehen habe ich display: flex; in .animated class gesetzt, was dazu geführt hat, dass jedes innere Element auf seltsame Weise gerendert wurde.

Nun entferne ich also .animate class vollständig und lege stattdessen transition: all 0.5s und width:100% auf jedes direkte innere Element von .wrapper

an

Meine letzte scss sieht so aus:

%Vor%

Flex-Layout ist ein Erweiterungs-Thema, aber kurz für diesen besonderen Fall flex-direction: column ist das Anordnen von Elementen eines Faltenbalgs vorher.

Wenn eines dieser Elemente die absolute Position hat, wird es im Flex-Layout ignoriert, so dass alle anderen Elemente auf den verfügbaren Platz verteilt werden.

Sehen Sie sich dieses Handbuch über flexbox und das letzte Geige arbeiten hoffe es hilft.

    
AldoRomo88 24.01.2017, 14:05
quelle
1

Sie können stattdessen eine slideDown / slideUp-Animation verwenden. Um dies zu erreichen, müssen Sie die Höhe eines Gleitelements nicht kennen. Die Prinzipien von max-height transition erklären dort .

Dies führt dazu, dass Elemente unterhalb des Ziels animiert werden.

Schau dir mein Beispiel an, basierend auf deiner Geige.

    
Panama Prophet 24.01.2017 13:11
quelle
0

vue js bietet verschiedene Übergangsklassen , die Sie richtig verwenden müssen, um den Übergang zu glätten Ich habe mit deinem Beispiel in dieser Geige mit etwas CSS versucht, schau mal.

%Vor%

Einige Details aus der Dokumentation:

Es gibt sechs Klassen, die für Eingabe- / Freigabe-Übergänge angewendet werden.

  1. v-enter: Startzustand für enter. Hinzugefügt, bevor das Element eingefügt wurde, wurde ein Rahmen entfernt, nachdem das Element eingefügt wurde.
  2. v-enter-active: Aktiver Status für enter. Wird während der gesamten Eintrittsphase angewendet. Hinzugefügt, bevor das Element eingefügt wird, wird entfernt, wenn der Übergang / die Animation beendet ist. Diese Klasse kann verwendet werden, um die Dauer, die Verzögerung und die Beschleunigungskurve für den eintretenden Übergang zu definieren.
  3. v-enter-to: Nur verfügbar in Versionen & gt; = 2.1.8. Endstatus für Enter. Es wurde ein Frame hinzugefügt, nachdem das Element eingefügt wurde (zur gleichen Zeit, als v-enter entfernt wurde). Es wurde entfernt, wenn der Übergang / die Animation beendet ist.
  4. v-leave: Startzustand für Urlaub. Wird sofort hinzugefügt, wenn ein austretender Übergang ausgelöst wird, nach einem Rahmen entfernt.
  5. v-leave-active: Aktiver Status für den Urlaub. Wird während der gesamten Austrittsphase angewendet. Wird sofort hinzugefügt, wenn der Übergang für den Übergang ausgelöst wird, wenn der Übergang / die Animation beendet wird. Diese Klasse kann verwendet werden, um die Dauer, die Verzögerung und die Beschleunigungskurve für den Übergang zu definieren.
  6. v-leave-to: Nur verfügbar in Versionen & gt; = 2.1.8. Endstatus für Urlaub. Es wurde ein Frame hinzugefügt, nachdem ein Leaving-Übergang ausgelöst wurde (zur gleichen Zeit wurde 7. v-leave entfernt), wenn der Übergang / die Animation beendet ist.

Sie können auch CSS-Animationen verwenden, wo Sie in verschiedenen Phasen des Übergangs was tun können wird deine css-Eigenschaft sein, um deine Übergänge flüssiger zu machen, wie folgt und Demo Geige :

%Vor%     
Saurabh 19.01.2017 15:07
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Sorgt TypeScript nicht dafür, dass eine Promise mit dem richtigen Typ aufgelöst wird?