The View Transitions API: Smooth Page and State Changes in the Browser
Τι κάνει το View Transitions API, πώς λειτουργούν οι μεταβάσεις ίδιου εγγράφου και μεταξύ εγγράφων, πώς να τις διαμορφώσετε με το CSS και πώς να τις χρησιμοποιήσετε με υπευθυνότητα.
Core Takeaway
Το View Transitions API επιτρέπει στο πρόγραμμα περιήγησης να κάνει κίνηση μεταξύ δύο καταστάσεων μιας σελίδας. Καλέστε το document.startViewTransition() με μια συνάρτηση που ενημερώνει το DOM και το πρόγραμμα περιήγησης λαμβάνει στιγμιότυπα τις παλιές και τις νέες προβολές και κινούμενες εικόνες μεταξύ τους, τις οποίες μπορείτε να διαμορφώσετε με ψευδοστοιχεία ::view-transition. Λειτουργεί σε εφαρμογές μιας σελίδας και, σε προγράμματα περιήγησης υποστήριξης, σε πλοήγηση σελίδων.
Πώς λειτουργεί
Το MDN περιγράφει το document.startViewTransition() ως έναρξη μιας μετάβασης προβολής του ίδιου εγγράφου, τυπικό σε εφαρμογές μιας σελίδας. Το πρόγραμμα περιήγησης καταγράφει την τρέχουσα προβολή, εκτελεί την ενημέρωση σας, καταγράφει τη νέα προβολή και κινείται μεταξύ τους. Από προεπιλογή, αυτό είναι ένα cross-fade. Το CSS σάς επιτρέπει να το αλλάξετε.
Ίδιο έγγραφο και διασταύρωση
Οι μεταβάσεις των ίδιων εγγράφων εκτελούνται σε μία σελίδα, όπως στα SPA, και το Chrome τις υποστηρίζει από το Chrome 111. Οι μεταβάσεις μεταξύ εγγράφων κινούνται μεταξύ χωριστών σελίδων σε τοποθεσίες πολλών σελίδων, κάτι που οι σημειώσεις MDN ήταν ιστορικά αδύνατες. χρησιμοποιούν τα συμβάντα ανταλλαγής σελίδων και σελιδοποίησης και μια επιλογή συμμετοχής στο CSS. Η υποστήριξη του προγράμματος περιήγησης διαφέρει μεταξύ των δύο, επομένως ελέγξτε τους τρέχοντες πίνακες συμβατότητας.
Στυλ για τη μετάβαση
Η περισσότερη προσαρμογή είναι απλή CSS:
- Δώστε σε ένα στοιχείο ένα όνομα προβολής-μετάβασης για να το κάνετε κίνηση ξεχωριστά από την υπόλοιπη σελίδα, όπως μια μικρογραφία που μετατρέπεται σε εικόνα ήρωα.
- Στοχεύστε τα ::view-transition-old() και ::view-transition-new() για να προσαρμόσετε την κινούμενη εικόνα.
- Κρατήστε τις διάρκειες σύντομες και την κίνηση ουσιαστική.
- Τυλίξτε προσαρμοσμένα κινούμενα σχέδια σε ελέγχους προτιμήσεων-μειωμένης κίνησης.
Προοδευτική βελτίωση
Να ελέγχετε πάντα την υποστήριξη πριν καλέσετε το API και να ενημερώνετε απευθείας το DOM εάν λείπει. Η σελίδα θα πρέπει να λειτουργεί πανομοιότυπα χωρίς την κίνηση. Αποφύγετε τις μεγάλες μεταβάσεις στην πλοήγηση, οι οποίες κάνουν όλο τον ιστότοπο να αισθάνεται πιο αργός.
Απόσπασμα υλοποίησης παραγωγής
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Κλειδί Principles για να θυμάστε
- Η startViewTransition() λαμβάνει στιγμιότυπα παλιές και νέες προβολές και κινεί ανάμεσά τους
- Υπάρχουν παραλλαγές ίδιου εγγράφου (SPA) και διασταυρούμενου εγγράφου (πολλαπλών σελίδων).
- Στυλ με ψευδοστοιχεία view-transition-name και ::view-transition
- Ελέγξτε την υποστήριξη και επιστρέψτε σε μια άμεση ενημέρωση
- Διατηρήστε τις μεταβάσεις σύντομες και σεβαστείτε τη μειωμένη κίνηση
Συχνές Ερωτήσεις
Πηγές
- View Transition API — MDN Έγγραφα Ιστού
- Smooth transitions with the View Transition API — Chrome για προγραμματιστές