Κινήσεις

Κινήσεις Click

`v-click`

Για να εφαρμόσετε "κινήσεις click" σε στοιχεία, μπορείτε να χρησιμοποιήσετε την οδηγία v-click ή τα <v-click> components

# Γεια

<!-- Χρήση component: αυτό θα είναι αόρατο μέχρι να πατήσετε "next" -->
<v-click>

Γεια σου Κόσμε

</v-click>

<!-- Χρήση οδηγίας: αυτό θα είναι αόρατο μέχρι να πατήσετε "next" για δεύτερη φορά -->
<div v-click class="text-xl p-2">

Έι!

</div>

`v-after`

Η χρήση του v-after είναι παρόμοια με το v-click αλλά θα κάνει το στοιχείο ορατό όταν ενεργοποιηθεί το προηγούμενο v-click.

<div v-click>Γεια σου</div>
<div v-after>Κόσμε</div>

Όταν κάνετε click στο κουμπί "next", τόσο το Γεια σου όσο και το Κόσμε θα εμφανιστούν μαζί.

`v-click-hide`

Το ίδιο με το v-click, αλλά αντί να κάνει το στοιχείο να εμφανιστεί, κάνει το στοιχείο αόρατο μετά το click.

<div v-click-hide>Γεια</div>

`v-clicks`

Το v-clicks παρέχεται μόνο ως component. Είναι μια συντομογραφία για την εφαρμογή της οδηγίας v-click σε όλα τα στοιχεία-παιδιά του. Είναι ιδιαίτερα χρήσιμο όταν δουλεύετε με λίστες.

<v-clicks>

- Στοιχείο 1
- Στοιχείο 2
- Στοιχείο 3
- Στοιχείο 4

</v-clicks>

Ένα στοιχείο θα γίνεται ορατό κάθε φορά που κάνετε click στο "next".

Προσαρμοσμένος Αριθμός Clicks

Εξ ορισμού, το Slidev μετράει πόσα βήματα απαιτούνται πριν από τη μετάβαση στην επόμενη διαφάνεια. Μπορείτε να παρακάμψετε αυτή τη ρύθμιση περνώντας την επιλογή clicks frontmatter:

---
# 10 click σε αυτή τη διαφάνεια, πριν προχωρήσετε στην επόμενη
clicks: 10
---

Διάταξη

Περνώντας το δείκτη των click στις οδηγίες σας, μπορείτε να προσαρμόσετε τη σειρά της αποκάλυψης

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

<!-- η σειρά είναι αντίστροφη -->
<div v-click="3">1</div>
<div v-click="2">2</div>
<div v-click="1">3</div>

---
clicks: 3
---

<!-- ορατό μετά από 3 clicks -->
<v-clicks at="3">
  <div>Γεια</div>
</v-clicks>

Μεταβάσεις Στοιχείων

Όταν εφαρμόζετε την οδηγία v-click στα στοιχεία σας, θα τους επισυνάψει το όνομα του class slidev-vclick-target. Όταν τα στοιχεία είναι κρυμμένα, θα επισυνάπτεται επίσης το όνομα του class slidev-vclick-hidden. Για παράδειγμα:

<div class="slidev-vclick-target slidev-vclick-hidden">Κείμενο</div>

Μετά από ένα click, θα γίνει

<div class="slidev-vclick-target">Κείμενο</div>

Εξ ορισμού, μια διακριτική μετάβαση αδιαφάνειας εφαρμόζεται σε αυτά τα classes:

// η προεπιλογή

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

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

Μπορείτε να τα παρακάμψετε για να προσαρμόσετε τα effects μετάβασης στα προσαρμοσμένα stylesheets σας.

Για παράδειγμα, μπορείτε να επιτύχετε τις μεταβάσεις κλιμάκωσης προς τα πάνω με:

// styles.css

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

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

Για να καθορίσετε τις κινήσεις μόνο για ορισμένες διαφάνειες ή layouts

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

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

Μάθετε περισσότερα για την προσαρμογή των styles.

Κίνηση

Το Slidev έχει ενσωματωμένο το @vueuse/motion. Μπορείτε να χρησιμοποιήσετε την οδηγία v-motion σε οποιαδήποτε στοιχεία για να εφαρμόσετε κίνηση σε αυτά. Για παράδειγμα

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

Το κείμενο Slidev θα μετακινηθεί από το -80px στην αρχική του θέση κατά την αρχικοποίηση.

Σημείωση: Το Slidev φορτώνει προκαταβολικά την επόμενη διαφάνεια για λόγους απόδοσης, πράγμα που σημαίνει ότι οι κινήσεις μπορεί να ξεκινήσουν πριν πλοηγηθείτε στη σελίδα. Για να λειτουργήσει σωστά, μπορείτε να απενεργοποιήσετε την προφόρτωση για τη συγκεκριμένη διαφάνεια
---
preload: false
---
Ή ελέγξτε τον κύκλο ζωής του στοιχείου με το v-if για να έχετε λεπτομερείς χειρισμούς
<div
  v-if="$slidev.nav.currentPage === 7"
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>

Μάθετε περισσότερα: Demo | @vueuse/motion | v-motion | Presets

Μεταβάσεις Σελίδων

Ενσωματωμένη υποστήριξη για τις διαφάνειες ΔΕΝ παρέχεται ΑΚΟΜΑ στην τρέχουσα έκδοση. Σχεδιάζουμε να προσθέσουμε την υποστήριξή τους στην επόμενη κύρια έκδοση. Πριν γίνει αυτό, μπορείτε ακόμα να χρησιμοποιήσετε τα προσαρμοσμένα styles και τα libraries σας για να το κάνετε αυτό.

Κινήσεις #