Οι μεταβάσεις CSS είναι ένας πολύ καλός τρόπος για να δημιουργήσετε διαδραστικότητα. Είναι αρκετό, transition στην αρχική κατάσταση ενός στοιχείου και το πρόγραμμα περιήγησης ενεργοποιεί τη μετάβαση μεταξύ των δύο καταστάσεων. Μεταβάσεις για εγγενή μεγέθη στοιχείων όπως auto Ωστόσο, ήταν ένα πρόβλημα για τους προγραμματιστές ιστού εδώ και δεκαετίες και η μόνη επιλογή ήταν ο δυναμικός υπολογισμός του ύψους χρησιμοποιώντας JavaScript.
Μια άλλη πρόκληση είναι η έναρξη μεταβάσεων όταν ένα στοιχείο αποκτά το πρώτο του στυλ - όπως όταν προστίθεται στο DOM ή όταν το display-τιμή του none αλλαγές. Αυτό το άρθρο εξηγεί πώς να λύσετε αυτό το πρόβλημα με τις νέες δυνατότητες CSS όπως calc-size(), interpolate-size, @starting-style και transition-behavior μπορεί να διαχειριστεί.
Λύση με calc-size()
Εάν κάποιος έχει ένα στοιχείο DOM που προέρχεται από μια κλειστή κατάσταση (height: 0) σε ανοιχτή κατάσταση (height: auto) περνάει, το animation συνήθως δεν εκτελείται, παρόλο που το transitionΈχει οριστεί ιδιοκτησία. Αυτό συμβαίνει επειδή τα προγράμματα περιήγησης δεν υποστηρίζουν μεταβάσεις σε εγγενή μεγέθη όπως auto υποστήριξη. Το νέο calc-size()Η συνάρτηση, ωστόσο, επιτρέπει υπολογισμούς σε αυτά τα εγγενή μεγέθη και επομένως και μεταβάσεις:
f95f6dcb193aa903adc84ce47bc4a296
Ο calc-size()-Η λειτουργία δεν είναι ακόμη διαθέσιμη σε όλα τα προγράμματα περιήγησης. Μια εναλλακτική λύση μπορεί να επιτευχθεί κρατώντας το πρωτότυπο height: auto-Δήλωση μπορεί να επιτευχθεί.
Λύση με interpolate-size
Ο interpolate-sizeΗ ιδιότητα σάς επιτρέπει να ορίσετε τη συμπεριφορά παρεμβολής των προγραμμάτων περιήγησης και να αποφασίσετε εάν θα κάνετε διάκριση μεταξύ λέξεων-κλειδιών όπως π.χ auto θα πρέπει να παρεμβάλλεται. Από προεπιλογή, η παρεμβολή εμφανίζεται μόνο μεταξύ αριθμητικών τιμών. Με allow-keywords Ωστόσο, μπορείτε να ενεργοποιήσετε τις μεταβάσεις μεταξύ λέξεων-κλειδιών:
f95f6dcb193aa903adc84ce47bc4a296
Από εσάς interpolate-size: allow-keywords στο :rootΣτοιχείο, ενεργοποιείτε τη νέα συμπεριφορά για ολόκληρη τη σελίδα.
Μετάβαση από display:none
Ένα άλλο πρόβλημα προκύπτει όταν ένα στοιχείο του display:none μεταβαίνει σε μια ορατή κατάσταση. Εκεί display δεν είναι μια ζωντανή ιδιότητα, δεν εμφανίζεται κίνηση. Οι νέες λειτουργίες CSS βοηθούν εδώ @starting-style και transition-behavior:
f95f6dcb193aa903adc84ce47bc4a296
Με transition-behavior: allow-discrete διασφαλίζει ότι το κινούμενο σχέδιο εκτελείται πριν από το display-τιμή του block επί none είναι εναλλαγή. Αυτοί οι κανόνες επιτρέπουν την εκτέλεση μεταβάσεων ακόμη και κατά τη διάρκεια μιας αρχικής ενημέρωσης στυλ. Ο @starting-styleΚανόνας διασφαλίζει ότι η κινούμενη εικόνα εκτελείται σωστά σε μια αρχική ενημέρωση στυλ.
Υποστήριξη προγράμματος περιήγησης
Επί του παρόντος τα νέα ακίνητα calc-size() και interpolate-size δεν υποστηρίζεται ακόμη από όλα τα προγράμματα περιήγησης. Στο Chrome είναι διαθέσιμα πίσω από μια σημαία πειράματος, αλλά όχι ακόμη στο Safari και τον Firefox. Ομοίως, υποστήριξη για transition-behavior υπάρχει σε Chrome και Edge, αλλά όχι σε Safari και Firefox. Ας ελπίσουμε ότι αυτό θα αλλάξει στο μέλλον.