Style transition ιδιότητα

Ορισμός και χρήση

transition Η ιδιότητα είναι μια συντομευμένη έκδοση των τεσσάρων ιδιοτήτων διαδρομής:

Σημειώσεις:Πάντα ορίστε transitionDuration ιδιότηταΕάν δεν οριστεί, η διάρκεια είναι 0 και η διαδρομή θα είναι άκυρη.

Για περισσότερες πληροφορίες:

CSS Reference Manual:transition ιδιότητα

Παράδειγμα

Αποθέστε το ποντίκι πάνω στο στοιχείο div για να αλλάξει σταδιακά η εμφάνισή του:

document.getElementById("myDIV").style.transition = "all 2s";

Προσπαθήστε το προσωπικά

Γραμματική

Επιστρέφει την ιδιότητα transition:

object.style.transition

Ορίζει την ιδιότητα transition:

object.style.transition = "property duration timing-function delay|initial|inherit"

Τιμή ιδιότητας

Τιμή Περιγραφή
transitionProperty Ορίζει το όνομα της CSS ιδιότητας που αφορά η διαδρομή.
transitionDuration Ορίζει πόσα δευτερόλεπτα ή miliseconds χρειάζονται για να ολοκληρωθεί η διαδρομή.
transitionTimingFunction Ορίζει την καμπύλη ταχύτητας της διαδρομής.
transitionDelay Ορίζει πότε ξεκινά η διαδρομή.
initial Αναθέτει αυτήν την ιδιότητα στην προεπιλεγμένη τιμή της. Εξετάστε το: initial.
inherit Επιτρέπει την κληρονομιά αυτής της ιδιότητας από το γονικό στοιχείο. Εξετάστε το: inherit.

Τεχνικά λεπτομέρειες

Προεπιλεγμένη τιμή: all 0 ease 0
Επιστροφή τιμής: 字符串, 表示元素的 transition ιδιότητα.
Έκδοση CSS: CSS3

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

Τα αριθμήματα στον πίνακα αναφέρουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως αυτήν την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1