Vue lernen

Kapitel 10. Übergänge und Animationen in Vue

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Wir haben uns mit allen wichtigen Aspekten des Aufbaus einer funktionierenden Vue-Anwendung beschäftigt, einschließlich der Handhabung von Routen und des Datenflusses mit der richtigen Zustandsverwaltung. In diesem Kapitel geht es um ein einzigartiges Vue-Feature zur Verbesserung des Nutzererlebnisses: Animationen und Übergänge mithilfe von Übergangskomponenten, Hooks und CSS.

CSS-Übergänge und CSS-Animationen verstehen

CSS-Animationen sind die visuellen Auswirkungen einer Zustandsänderung auf ein bestimmtes Element oder eine Komponente, wobei es keine Begrenzung für die Anzahl der Zustände gibt. Eine CSS-Animation kann automatisch starten und in eine Schleife gehen, ohne dass sie explizit ausgelöst wird. Im Gegensatz dazu ist ein CSS-Übergang eine Animation, die nur auf einen Wechsel zwischen zwei Zuständen reagiert, z. B. von einem mittleren zu einem schwebenden Zustand bei einer Schaltfläche oder von einem verborgenen zu einem sichtbaren Zustand bei einem Tooltip. Um eine CSS-Animation zu definieren, verwenden wir oft die Regel @keyframes und wenden sie dann auf das Zielelement mit deranimation Eigenschaft. Zum Beispiel können wir einen einfachen Animationseffekt für eineSchaltfläche definieren:

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba ...