Zmiana stylu Właściwość
Przykład
Najedź na element div, aby stopniowo zmieniać jego wygląd:
document.getElementById("myDIV").style.transition = "all 2s";
Definicja i użycie
Właściwość przejścia jest skróconą właściwością czterech właściwości przejścia:
transitionProperty, transitionDuration, transitionTimingFunction i transitionDelay.
Uwaga: Zawsze określaj właściwość transitionDuration, w przeciwnym razie czas trwania wynosi 0, a przejście nie przyniesie efektu.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Składnia
Zwróć właściwość przejścia:
object.style.transition
Ustaw właściwość przejścia:
object.style.transition = "property duration timing-function delay|initial|inherit"
Wartości nieruchomości
Value | Description |
---|---|
transitionProperty | Specifies the name of the CSS property the transition effect is for |
transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
transitionTimingFunction | Specifies the speed curve of the transition effect |
transitionDelay | Defines when the transition effect will start |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Szczegóły techniczne
Domyślna wartość: | wszystko 0 łatwość 0 |
---|---|
Wartość zwrotu: | String, reprezentujący właściwość przejścia elementu |
Wersja CSS | CSS3 |
Powiązane strony
Dokumentacja CSS: właściwość przejścia
❮ Obiekt stylu