Μαζί με την εισαγωγή του CSS3 έρχονται πολλά νέα χαρακτηριστικά που είναι διαθέσιμα για χρήση στη δημιουργία μεγάλων εφέ. μία από τις πιο χρήσιμες είναι η ιδιότητα μετάβασης .
Η ιδιοκτησία μετάβασης είναι μια σημαντική νέα ανάπτυξη στο CSS. Μπορεί να χρησιμοποιηθεί για να δημιουργήσει ένα δυναμικό εφέ αλλαγής σε div ή κλάση χρησιμοποιώντας μια απλή δομή:
transition: property duration timing-function delay;Η μετάβαση του CSS3 είναι ένας πολύ καλός τρόπος για να προσθέσετε μια μικρή κίνηση σε ιστότοπους χωρίς τη μεγάλη επιβάρυνση μιας βιβλιοθήκης JavaScript όπως το jQuery.
Πριν αρχίσουμε, μπορείτε να δείτε εδώ ένα demo τη μεταβατική ιδιοκτησία σε δράση .
Πρώτον, για να λειτουργήσει η ιδιότητα μετάβασης, πρέπει να καθοριστεί η τυπική ιδιότητα που θα εφαρμοστεί. Αναμφισβήτητα οι δύο πιο κοινές ιδιότητες που θα οριστούν είναι το πλάτος και το ύψος. Για να γράψετε την αυτόνομη ιδιοκτησία απλά χρησιμοποιήστε:
transition-property: define propertyΑκολούθως, αφού προσδιοριστεί η ιδιότητα, τότε πρέπει να εκχωρηθούν οι αρχικές και τελικές τιμές. Στην περίπτωση τιμών όπως το πλάτος ή το ύψος, η ιδιότητα πρέπει να οριστεί με μια τιμή έναρξης και έπειτα μια τελική τιμή με κάποιες άλλες συνθήκες.
Για παράδειγμα, εδώ ορίσαμε τη μεταβατική ιδιότητα στο πλάτος, κατόπιν την τιμή εκκίνησης του πλάτους και έπειτα ορίσαμε την τελική τιμή όταν το στοιχείο κυλάει πάνω από:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Τώρα που έχουμε ορίσει την ιδιότητα μετασχηματισμού, τις αρχικές και τις τελικές τιμές, πρέπει να καθορίσουμε τη διάρκεια της μετάβασης. Αυτό επιτυγχάνεται με τον καθορισμό ενός μήκους σε δευτερόλεπτα ή σε χιλιοστά του δευτερολέπτου όπως παρακάτω:
transition-duration: duration;Χτίζοντας αυτό στο παράδειγμα, δημιουργείται ο ακόλουθος κώδικας:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Αυτό σημαίνει ότι το div headheader θα επεκταθεί κατά 25px σε διάρκεια 5 δευτερολέπτων.
Ο κώδικας είναι αρκετός για να δημιουργήσει ένα ωραίο αποτέλεσμα, ωστόσο μπορούμε να χρησιμοποιήσουμε περαιτέρω την ιδιότητα μετάβασης CSS3 χρησιμοποιώντας τη λειτουργία χρονισμού Χρησιμοποιώντας αυτή την ιδιότητα είναι δυνατό να αλλάξουμε την καμπύλη ταχύτητας της διάρκειας μετάβασης. Η ιδιότητα μετάβασης ορίζεται από προεπιλογή σε γραμμική καμπύλη. Ωστόσο, μπορείτε να ορίσετε την ευκολία, την ευκολία στην είσοδο, την ευκολία στην έξοδο, την ευκολία στην έξοδο και ακόμη και την κυβική αλλαγή για να αλλάξετε την καμπύλη ταχύτητας. Το cubic-bezier σας επιτρέπει να ορίσετε τις δικές σας τιμές χρησιμοποιώντας (n, n, n, n) όπου n μπορεί να είναι μεταξύ 0 και 1 (για παράδειγμα γραμμική θα ήταν (0,0,1,1)).
Η προσθήκη αυτού του κώδικα στο παράδειγμα μας έχει ως αποτέλεσμα:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Επιπλέον, πολύ σαν τη μετάβαση-διάρκεια, χρησιμοποιώντας την ιδιότητα καθυστέρησης μετάβασης ορίζει μια παύση πριν ξεκινήσει το εφέ μετάβασης:
transition-delay: time;Τέλος, είναι σημαντικό να λάβετε υπόψη δύο πράγματα όταν χρησιμοποιείτε την ιδιότητα μετάβασης CSS3. Πρώτον, τα περισσότερα προγράμματα περιήγησης που κυκλοφορούν προς το παρόν απαιτούν ένα πρόθεμα του προγράμματος περιήγησης για να το χρησιμοποιήσετε (εξαιρέσεις είναι οι IE10, Opera και Firefox16 +):
-moz-transition: για τον Firefox 15
-webkit-transition: για το Chrome και το Safari
(Λάβετε υπόψη ότι το IE9 και το χαμηλότερο δεν υποστηρίζουν καθόλου τη μεταβατική ιδιοκτησία.)
Δεύτερον, αν και έχω χρησιμοποιήσει μακρύ χέρι στα παραπάνω παραδείγματα για λόγους σαφήνειας, θεωρείται βέλτιστη πρακτική να γράψω σε σύντομη μορφή, ως εξής:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Χρησιμοποιείτε την ιδιότητα μετάβασης του CSS3; Πώς συγκρίνεται με τα tweens που βασίζονται στο jQuery; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα κίνησης μέσω Shutterstock.