8
Desidero evitare alcuni degli effetti di transizione sull'elemento (ad esempio: opacity). Dovrei usare opacity 0s, perché questo dovrebbe essere il valore predefinito o in altre parole la transizione non avrà alcun effetto su questo. Ma non sta funzionando in questo modo. Questo è quello che ho provato:La transizione CSS 0s (zero secondi) non funziona?
div {
width: 100px;
height: 100px;
opacity: 0.5;
background: red;
-webkit-transition: all 2s, opacity 0s;
transition: all 2s, opacity 0s;
}
div:hover {
width: 300px;
opacity: 1;
}
<div></div>div {
width: 100px;
height: 100px;
opacity: 0.5;
background: red;
-webkit-transition: all 2s, opacity 0.1s;
transition: all 2s, opacity 0.1s;
}
div:hover {
width: 300px;
opacity: 1;
}
<div></div>Tuttavia, se 0s della opacity cambiato in 0.1s, funzionerà (con una durata di 0,1 secondi), c'è un modo per "disabilitare" l'animazione in qualche altro modo, forse, quindi funzionerà senza nemmeno un piccolo valore come 0.1s?
Grazie Juhana (ho dimenticato un soprannome) per aggiungere uno snippet. Ho seguito il trucco e ho fatto lo stesso con un altro codice, solo per mostrare la differenza di '0s' e' 0.1s' – cathe
Usando 'all' come' 'transition-property' non è molto efficiente; ogni volta che è possibile, si dovrebbe usare la proprietà/i/i cui si desidera effettuare la transizione. Nel caso del tuo esempio sopra, sarebbe semplicemente 'width'. – Shaggy
Domanda molto interessante @cathe e comportamento strano perché la specifica dice questo - * Se una proprietà viene specificata più volte nel valore di 'transition-property' (sia da solo, tramite una scorciatoia che lo contiene, o tramite il 'tutto 'valore), quindi la transizione che inizia utilizza la funzione duration, delay e timing nell'indice corrispondente all'ultimo elemento nel valore di' transition-property 'che richiede l'animazione di quella proprietà. *. Hai provato questo in più browser? Il comportamento è lo stesso? – Harry