Animate

Πότε να τη χρησιμοποιήσετε

Το /impeccable animate είναι για διεπαφές που νιώθονται άψυχες, όπου οι αλλαγές κατάστασης είναι άμεσες и απότομες, όπου η φόρτωση απλώς εμφανίζεται, όπου ο χρήστης δεν είναι ποτέ αρκετά σίγουρος ότι το κλικ του καταχωρήθηκε. Χρησιμοποιήστε το για να προσθέσετε τις μικρές κινήσεις που επικοινωνούν τι συμβαίνει: είσοδοι, έξοδοι, ανατροφοδότηση, μεταβάσεις μεταξύ καταστάσεων.

Μην το χρησιμοποιήσετε για να προσθέσετε αναπηδήσεις ή ελαστικά φτερά για χάρη ενέργειας. Αυτό είναι διακόσμηση, и αυτή η δεξιότητα δεν θα σας το δώσει.

Πώς λειτουργεί

Η δεξιότητα εντοπίζει στατικές στιγμές που θα ωφελούνταν από κίνηση, μετά τις εφαρμόζει με αυστηρή πειθαρχία:

1. Είσοδοι и έξοδοι: τα στοιχεία εμφανίζονται и φεύγουν με fades 200 έως 300ms συν ευαίσθητο Y ή κλίμακα, ποτέ ιδιότητες διάταξης.
2. Ανατροφοδότηση κατάστασης: hover, active, focus, φόρτωση, επιτυχία όλα επικοινωνούν μέσω κίνησης αντί για ξαφνικές ανταλλαγές.
3. Μεταβάσεις μεταξύ προβολών: κοινές-στοιχείου μεταβάσεις όπου έχει νόημα, fade-through αλλιώς.
4. Πρόοδος и φόρτωση: οθόνες skeleton, ντετερμινιστικές μπάρες, κίνηση που λέει «ακόμα δουλεύω».
5. Μειωμένη κίνηση: κάθε animation έχει μια εναλλακτική prefers-reduced-motion.

Το easing είναι πάντα εκθετικό (ease-out-quart, quint ή expo) επειδή τα πραγματικά αντικείμενα επιβραδύνουν ομαλά. Χωρίς αναπήδηση, χωρίς ελαστικό, χωρίς linear για τίποτα εκτός από δείκτες προόδου.

Η δεξιότητα κάνει animate μόνο transform и opacity. Αν βρείτε τον εαυτό σας να κάνει animate width, height, top ή left, κάνει κάτι λάθος. Χρησιμοποιήστε grid-template-rows για μεταβάσεις ύψους.

Δοκιμάστε το

/impeccable animate the sign-up flow

Τυπικές προσθήκες:

• Το πεδίο email αποκτά μια λάμψη εστίασης στο focus-visible (opacity + shadow, 180ms)
• Το κουμπί υποβολής δείχνει έναν spinner μέσα του στην κατάσταση φόρτωσης, όχι έναν ξεχωριστό spinner δίπλα του
• Η οθόνη επιτυχίας εισέρχεται με opacity + translateY(8px), 260ms, ease-out-quart
• Το μήνυμα σφάλματος ολισθαίνει κάτω με grid-template-rows (όχι height), 220ms
• Εναλλακτική @media (prefers-reduced-motion: reduce) για κάθε μετάβαση

Παγίδες

• Ζήτηση «περισσότερου animation». Το Animate δεν είναι ένας δείκτης. Προσθέτει όπου η κίνηση επικοινωνεί, όχι παντού.
• Αφαίρεση των εναλλακτικών reduced-motion. Η δεξιότητα τις προσθέτει αυτόματα. Μη διαπραγματεύσιμα για προσβασιμότητα.