Vlastnost přechodu stylu
Příklad
Umístěním ukazatele myši na prvek div postupně změníte jeho vzhled:
document.getElementById("myDIV").style.transition = "all 2s";
Definice a použití
Vlastnost přechodu je zkrácená vlastnost pro čtyři vlastnosti přechodu:
transitionProperty, transitionDuration, transitionTimingFunction a transitionDelay.
Poznámka: Vždy zadejte vlastnost transitionDuration, jinak je doba trvání 0 a přechod nebude mít žádný účinek.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Property | |||||
---|---|---|---|---|---|
transition | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransition |
12.1 |
Syntax
Vraťte vlastnost přechodu:
object.style.transition
Nastavte vlastnost přechodu:
object.style.transition = "property duration timing-function delay|initial|inherit"
Hodnoty vlastností
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 |
Technické údaje
Výchozí hodnota: | vše 0 snadno 0 |
---|---|
Návratová hodnota: | Řetězec představující vlastnost přechodu prvku |
Verze CSS | CSS3 |
Související stránky
CSS reference: vlastnost přechodu
❮ Objekt stylu