# Animationen

# Klick Animationen

# v-click

Um "Klick-Animationen" zu Elementen hinzuzufügen, können die v-click-Direktive oder <v-click> Komponente verwendet werden.

# Hallo

<!-- Nutzung der Komponente: Der Text ist unsichtbar, bis "Weiter" gedrückt wird -->
<v-click>

Hallo Welt

</v-click>

<!-- Nutzung der Direktive: Der Text ist unsichtbar, bis "Weiter" ein weiteres mal gedrückt wird -->
<div v-click class="text-xl p-2">

Hey!

</div>

# v-after

Die Verwendung von v-after ist ähnlich wie v-click, aber diesmal wird das Element sichtbar, wenn der Vorherige v-clickausgelöst wird.

<div v-click>Hallo</div>
<div v-after>Welt</div>

Wenn "Weiter" gedrückt wird, werden Hallound Welt zusammen sichtbar.

# v-click-hide

Funktioniert genau wie v-click, nur dass es das Element verschwinden lässt.

<div v-click-hide>Hallo</div>

# v-clicks

v-clicks wird nur als Komponente bereit gestellt. Es ist eine Abkürzung, um die v-click-Direktive auf alle untergeordneten Elemente anzuwenden. Es ist besonders nützlich, wenn man mit Listen arbeitet.

<v-clicks>

- Item 1
- Item 2
- Item 3
- Item 4

</v-clicks>

Jedes Mal, wenn man auf "Weiter" klickt, wird ein Element sichtbar.

# Benutzerdefinierte Anzahl der Klicks

Standardmäßig zählt Slidev, wie viele Schritte erforderlich sind, bevor zur nächsten Folie gewechselt wird. Man kann diese Einstellung überschreiben, indem man die Frontmatter-Option clicks übergibt:

---
# 10 klicks in der Folie, bevor es zur nächsten geht
clicks: 10
---

# Reihenfolge

Wenn man einen Index der v-click Direktive überreicht, kann die Reihenfolge der Enthüllung angepasst werden.

<div v-click>1</div>
<div v-click>2</div>
<div v-click>3</div>

<!-- Die Reihenfolge ist umgekehrt. -->
<div v-click="3">1</div>
<div v-click="2">2</div>
<div v-click="1">3</div>

---
clicks: 3
---

<!-- Sichtbar nach 3 Klicks -->
<v-clicks at="3">
  <div>Hi</div>
</v-clicks>

# Element Übergänge

Wenn die v-clickDirektive bei Elementen angewendet wird, erhalten diese auch die slidev-vclick-target CSS Klasse. Wenn das Element auch noch versteckt ist, des weiteren auch die Klasse slidev-vclick-hidden. Zum Beispiel:

<div class="slidev-vclick-target slidev-vclick-hidden">Text</div>

Nach einem Klick ist es:

<div class="slidev-vclick-target">Text</div>

Standardmäßig wird auf diese Klassen ein subtiler Deckkraftübergang angewendet:

// Standardmäßig:

.slidev-vclick-target {
  transition: opacity 100ms ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}

Man kann diese Übergänge in den eigenen Stylesheets überschreiben und verändern.

Zum Beispiel wäre ein Hochskalierender Übergang:

// styles.css

.slidev-vclick-target {
  transition: all 500ms ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
}

Animationen können auch nur für bestimmte Folien und Layouts festgelegt werden.

.slidev-page-7,
.slidev-layout.my-custom-layout {
  .slidev-vclick-target {
    transition: all 500ms ease;
  }

  .slidev-vclick-hidden {
    transform: scale(0);
  }
}

Weitere Informationen zum Anpassen von Styles.

# Bewegungen

Slidev hat @vueuse/motion integriert. Man kann die v-motion Direktive nutzten, um an Elementen Bewegungen anzuwenden. Beispiel:

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

Der Text Slidev bewegt sich von -80px zu seiner ursprüngliche Position.

Hinweis: Slidev lädt die nächste Folien für eine bessere Leistung vorab. Dadurch können eventuell einige Animationen schon beginnen. Damit dies verhindert wird, kann das vorab laden abgeschaltet werden:

---
preload: false
---

Oder man steuert den Elementlebenszyklus mit v-if für eine bessere Kontrolle

<div
  v-if="$slidev.nav.currentPage === 7"
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

Mehr erfahren: Demo | @vueuse/motion | v-motion | Presets

# Folienübergänge

Bisher gibt es KEINE integrierte Unterstützung für Folienübergange. Wir planen Folienübergange in der nächsten Hauptversion hinzuzufügen. Zuvor können dafür nur benutzerdefinierte Styles und Libraries genutzt werden.