Κινήσεις

Κινήσεις 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".

Δέχεται ένα prop depth για εμφωλευμένη λίστα:

<v-clicks depth="2">

- Στοιχείο 1
  - Στοιχείο 1.1
  - Στοιχείο 1.2
- Στοιχείο 2
  - Στοιχείο 2.1
  - Στοιχείο 2.2

</v-clicks>

Προσαρμοσμένος Αριθμός 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>

Είσοδος & Έξοδος

Διαθέσιμο από v0.43.0

Μπορείτε επίσης να καθορίσετε το δείκτη εισόδου και εξόδου για την οδηγία v-click περνώντας ένα array. Ο δείκτης τέλους είναι αποκλειστικός.

<div v-click="[2, 4]">Αυτό θα εμφανιστεί στο 2ο και 3ο κλικ και θα κρυφτεί ξανά μετά το 4ο.</div>

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

Όταν εφαρμόζετε την οδηγία 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

Μεταβάσεις Διαφανειών

Διαθέσιμο από v0.39.0

Το Slidev υποστηρίζει μεταβάσεις διαφανειών. Μπορείτε να τις ενεργοποιήσετε θέτοντας την επιλογή transition του frontmatter:

---
transition: slide-left
---

Αυτό θα σας δώσει ένα ωραίο εφέ ολίσθησης κατά την εναλλαγή των διαφανειών. Η ρύθμισή του στο frontmatter θα ισχύει για όλες τις διαφάνειες. Μπορείτε επίσης να ορίσετε διαφορετική μετάβαση ανά διαφάνεια.

Ενσωματωμένες μεταβάσεις

fade - Crossfade κατά την είσοδο/έξοδο
fade-out - Fade out και μετά fade in
slide-left - Ολισθαίνει προς τα αριστερά (ολισθαίνει προς τα δεξιά κατά την επιστροφή)
slide-right - Ολισθαίνει προς τα δεξιά (ολισθαίνει προς τα αριστερά κατά την επιστροφή)
slide-up - Ολισθαίνει προς τα πάνω (ολισθαίνει προς τα κάτω κατά την επιστροφή)
slide-down - Ολισθαίνει προς τα κάτω (ολισθαίνει προς τα πάνω κατά την επιστροφή)
view-transition - Ολισθαίνει με το view transitions API

View Transitions

Διαθέσιμο από v0.43.0

Το View Transitions API παρέχει έναν μηχανισμό για την εύκολη δημιουργία κινούμενων μεταβάσεων μεταξύ διαφορετικών καταστάσεων DOM. Μάθετε περισσότερα για το πώς λειτουργεί στο View Transitions API - MDN Web Docs - Mozilla.

WARNING

Πειραματικό: Αυτό δεν υποστηρίζεται από όλους τους φυλλομετρητές. Ελέγξτε προσεκτικά τον πίνακα συμβατότητας με προγράμματα περιήγησης πριν το χρησιμοποιήσετε.

Μπορείτε να χρησιμοποιήσετε την ιδιότητα CSS view-transition-name για να ονομάσετε τα view transitions, τα οποία δημιουργούν συνδέσεις μεταξύ διαφορετικών στοιχείων της σελίδας και ομαλές μεταβάσεις κατά την εναλλαγή διαφανειών.

Μπορείτε να ενεργοποιήσετε την υποστήριξη Σύνταξης MDC (Markdown Component) για να ονομάζετε εύκολα τις μεταβάσεις προβολής:

---
transition: view-transition
mdc: true
---
# View Transition {.inline-block.view-transition-title}
---
# View Transition {.inline-block.view-transition-title}

Προσαρμοσμένες μεταβάσεις

Οι μεταβάσεις διαφανειών του Slidev λειτουργούν μέσω του Vue Transition. Μπορείτε να παρέχετε τις δικές σας προσαρμοσμένες μεταβάσεις με:

---
transition: my-transition
---

και στη συνέχεια στα προσαρμοσμένα stylesheets σας:

.my-transition-enter-active,
.my-transition-leave-active {
  transition: opacity 0.5s ease;
}

.my-transition-enter-from,
.my-transition-leave-to {
  opacity: 0;
}

Μάθετε περισσότερα για το πώς λειτουργεί στο Vue Transition.

Μεταβάσεις προς τα εμπρός και προς τα πίσω

Μπορείτε να καθορίσετε διαφορετικές μεταβάσεις για πλοήγηση προς τα εμπρός και προς τα πίσω χρησιμοποιώντας το | ως διαχωριστικό στο όνομα της μετάβασης:

---
transition: go-forward | go-backward
---

Με αυτό, όταν μεταβαίνετε από τη διαφάνεια 1 στη διαφάνεια 2, θα εφαρμόζεται η μετάβαση go-forward. Όταν πηγαίνετε από τη διαφάνεια 2 στη διαφάνεια 1, θα εφαρμόζεται η μετάβαση go-backward.

Σύνθετη Χρήση

Το πεδίο transition δέχεται μια επιλογή που θα δοθεί στο στοιχείο <TransitionGroup>. Για παράδειγμα:

---
transition:
  name: my-transition
  enterFromClass: custom-enter-from
  enterActiveClass: custom-enter-active
---

Κινήσεις #