Detaillierte Erläuterung der Vue-Übergangseffekte und Anwendungsbeispiele für Animationsübergänge

Schauen wir uns zunächst ein Beispiel an

Der Code lautet wie folgt

<Vorlage>
  <div align="center" style="margin-top: 100px;">
    <button @click="show= !show" >Testen</button>
    <Übergang>
      <div v-if="anzeigen">
        <p>Dies ist ein Textstück</p>
      </div>
    </Übergang>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Übergangstest',
  Daten () {
    zurückkehren {
      zeigen: wahr
    }
  }
}
</Skript>
<Stilbereich>
    .v-enter-active, .v-leave-active {
    Übergang: alle 0,5 s;
    }
    .v-eingeben {
    transformieren: übersetzenY(50px);
    Deckkraft: 0;
    }
    .v-aktiv lassen {
    transformieren: übersetzenY(50px);
    Deckkraft: .5;
    }
</Stil>

Umschließen Sie eine Div-Komponente und klicken Sie auf die Schaltfläche, um den Animationseffekt zu erzielen. Es wird normalerweise mit v-if, v-show, dynamischen Komponenten und Komponentenstammknoten verwendet.

Übergangs-Hook-Funktion

Transition bietet sechs Hook-Funktionen, die es uns ermöglichen, entsprechende Animationseffekte zu unterschiedlichen Zeiten zu schreiben. Nachfolgend sind die Ausführungszeiten dieser sechs Hook-Funktionen aufgeführt

1.v-enter: Geben Sie den Übergangsstartzustand ein. Wird vor dem Einfügen des Elements wirksam und im nächsten Frame nach dem Einfügen des Elements entfernt.

2.v-enter-active: Der Zustand, wenn der Übergang wirksam wird. Mit dieser Klasse können Eingangsübergangszeiten, Verzögerungen und Kurvenfunktionen definiert werden.

3.v-enter-to: Geben Sie den Endzustand des Übergangs ein. Wird einen Frame nach dem Einfügen des Elements wirksam (gleichzeitig wird v-enter entfernt) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist.

4.v-leave: Verlassen Sie den Ausgangszustand des Übergangs. Wird sofort wirksam, wenn ein Übergang zum Verlassen ausgelöst wird, und wird im nächsten Frame entfernt.

5.v-leave-active: Der Zustand, wenn der Übergang zum Verlassen wirksam wird. Mit dieser Klasse können Dauer, Verzögerung und Kurvenfunktion des Austrittsübergangs definiert werden.

6.v-leave-to: Verlassen Sie den Endzustand des Übergangs. Wird im nächsten Frame wirksam, nachdem der Übergang zum Verlassen ausgelöst wurde (gleichzeitig wird V-Leave entfernt) und wird entfernt, nachdem der Übergang/die Animation abgeschlossen ist.

Benutzerdefinierter Übergangsklassenname

Es gibt mehrere Stellen auf der Seite, die Übergangseffekte benötigen. Wenn Sie die von Vue bereitgestellten 6 Standard-Hook-Funktionen verwenden, sind die Übergangseffekte aller Stellen, an denen ein Übergang erfolgen soll, gleich. Wenn wir in unterschiedlichen Situationen unterschiedliche Animationseffekte definieren müssen, müssen wir den für jeden Übergangseffekt spezifischen Klassennamen definieren. Die Lösung besteht darin, dem Übergangstag ein Namensattribut hinzuzufügen und Ihr eigenes Klassennamenpräfix in das Namensattribut zu schreiben. Bei der Verwendung von Klassennamen sähe es beispielsweise so aus: .my-trans-leave, .my-trans-enter-to. wie:

    <transition name="meine-trans" mode="raus-ein">
       <router-view v-if="!$route.meta.keepAlive"></router-view>
    </Übergang>

Stil, my-trans ist das Präfix von „.my-trans-enter-active“

<Stil>
  .mein-trans-enter-active,
  .mein-trans-leave-active {
    Übergang: alle .2s;
    Deckkraft: 1;
  }
  .mein-trans-enter {
    Übergang: alle .2s;
    Deckkraft: 0;
  }
  .meine-trans-verlassen-zu {
    Übergang: alle .2s;
    Deckkraft: 0;
  }  
</Stil>

Verwendung der Übergangsgruppe

Wenn Sie eine Übergangsdarstellung für eine Liste durchführen, müssen Sie diese mit dem Übergangsgruppenelement umschließen. Klicken Sie auf den Inhalt in der Liste, um ihn gemäß der folgenden Animation zu entfernen. Das Beispiel lautet wie folgt

<Vorlage>
  <div Klasse="main_css">
    <Übergangsgruppenname="Folie">
      <li v-for="(Artikel,i) in Liste" :key="Artikel.id" @click="del(i)">
        {{ item.id }} --- {{ item.name }}
      </li>
    </Übergangsgruppe>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Übergangsgruppentest',
  Daten () {
    zurückkehren {
      Liste: [{
        ID: 1,
        Name: 'Geschmorter Fisch'
      },
      {
        ID: 2,
        Name: 'Bratkartoffeln'
      },
      {
        ID: 3,
        Name: ‚Geröstete Aubergine‘
      }
      ]
    }
  },
  Methoden: {
    Delikatessen) {
      diese.Liste.splice(i, 1)
    }
  }
}
</Skript>
<Stilbereich>
  .main_css {
    Rand links: 50px;
    Rand oben: 50px;
  }
  .slide-enter-active {
    Übergang: alle 0,5 s linear;
  }
  .slide-leave-active {
    Übergang: alle 0,1 s linear;
  }
  .slide-enter {
    transformieren: übersetzenX(-100%);
    Deckkraft: 0;
  }
  .schieben-verlassen-zu {
    transformieren: übersetzenX(110%);
    Deckkraft: 0;
  }
</Stil>

Zusammenfassung

Übergang und Animation werden mithilfe des Übergangs-Tags abgeschlossen und es werden 6 Hook-Funktionen bereitgestellt. Die globale Animation befindet sich in app.vue und der Übergang ist in der Router-View-Komponente enthalten, beispielsweise:; Fügen Sie dem Übergangstag das Namensattribut hinzu, um den Namen der Übergangsklasse zu definieren und lokale Änderungen zu erzielen.

Oben finden Sie eine ausführliche Erläuterung der Anwendungsbeispiele für Vue-Übergänge und Animationsübergänge. Weitere Informationen zu Vue-Übergängen und Animationsübergängen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!