Proprietà proprietà di transizione di stile
Esempio
Passa il mouse su un elemento div per modificarne gradualmente la larghezza e l'altezza:
document.getElementById("myDIV").style.transitionProperty = "width,height";
Definizione e utilizzo
La proprietà transitionProperty specifica il nome della proprietà CSS a cui si riferisce l'effetto di transizione (l'effetto di transizione inizierà quando la proprietà CSS specificata cambia).
Suggerimento: in genere si può verificare un effetto di transizione quando un utente passa il mouse sopra un elemento.
Nota: specificare sempre la proprietà transitionDuration, altrimenti la durata è 0 e la transizione non avrà alcun effetto.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
transitionProperty | 26.0 | 10.0 | 16.0 | 6.1 3.1 WebkitTransitionProperty |
12.1 |
Sintassi
Restituisce la proprietà transitionProperty:
object.style.transitionProperty
Imposta la proprietà transitionProperty:
object.style.transitionProperty = "none|all|property|initial|inherit"
Valori di proprietà
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Dettagli tecnici
Valore di default: | tutto |
---|---|
Valore di ritorno: | Una stringa, che rappresenta la proprietà di transizione di un elemento |
Versione CSS | CSS3 |
Pagine correlate
Riferimento CSS: proprietà di transizione
❮ Oggetto stile