Μετάβαση - CSS-Κόλπα

Η transitionιδιότητα είναι μια στενή ιδιότητα που χρησιμοποιείται για να αντιπροσωπεύσει έως και τέσσερις ιδιότητες longhand που σχετίζονται με τη μετάβαση:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

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

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

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

Δείτε το Pen Transition Demo του Louis Lazaris (@impressivewebs) στο CodePen.

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

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

Σε αυτό το παραπάνω παράδειγμα, τόσο το φόντο όσο και η επένδυση θα μεταβαίνουν, λόγω της τιμής "όλα" που καθορίζεται για το transition-propertyτμήμα του στενός.

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

div ( transition: background 0.2s ease, padding 0.8s linear; )

Ως επί το πλείστον, η σειρά των τιμών δεν έχει σημασία - εκτός εάν έχει καθοριστεί καθυστέρηση. Εάν καθορίσετε μια καθυστέρηση, πρέπει πρώτα να καθορίσετε μια διάρκεια. Η πρώτη τιμή που αναγνωρίζει το πρόγραμμα περιήγησης ως έγκυρη τιμή χρόνου θα αντιπροσωπεύει πάντα τη διάρκεια. Κάθε επόμενη έγκυρη τιμή χρόνου θα αναλυθεί ως καθυστέρηση.

Δεν είναι δυνατή η μετάβαση ορισμένων ιδιοτήτων, επειδή δεν είναι ιδιότητες με δυνατότητα κίνησης. Δείτε τις προδιαγραφές για μια πλήρη λίστα με τις ιδιότητες που είναι κινούμενες.

Καθορίζοντας τη μετάβαση στο ίδιο το στοιχείο, ορίζετε τη μετάβαση που θα συμβεί και στις δύο κατευθύνσεις. Δηλαδή, όταν αλλάζουν τα στυλ (π.χ. στο hover on), οι ιδιότητές τους θα αλλάξουν και όταν τα στυλ θα αλλάξουν (π.χ. στο hover off) θα αλλάξουν. Για παράδειγμα, οι ακόλουθες μεταβάσεις επίδειξης στο hover, αλλά όχι στο hover off:

Δείτε το Pen zohgt του Louis Lazaris (@ impressivewebs) στο CodePen.

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

Για συμβατότητα σε όλα τα υποστηρικτικά προγράμματα περιήγησης, απαιτούνται προθέματα προμηθευτών, με την τυπική σύνταξη να δηλώνεται τελευταία:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

Το IE10 (η πρώτη σταθερή έκδοση του IE που υποστηρίζει transition) δεν απαιτεί το -ms-πρόθεμα.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.