Il modo più conciso per scrivere una transizione CSS

Question

Esiste un modo più conciso per scrivere il seguente codice?

element{ 
    transition: all 700ms linear, 
     transform 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5), 
     background 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5); 
} 

Quello che sto cercando di fare è di applicare una funzione di temporizzazione di transizione diferent di trasformare e le proprietà di sfondo, mentre si utilizza un lineare per il resto delle proprietà. Funziona correttamente, ma sto cercando di tenerlo come DRY possibile.

Answer 1

Non c'è molto che tu possa fare qui. È possibile specificare separatamente la durata della transizione:

element{ 
    transition: all linear, 
     transform cubic-bezier(0.4, 0.25, 0.14, 1.5), 
     background cubic-bezier(0.4, 0.25, 0.14, 1.5); 
    transition-duration: 700ms; 
} 

Ma questo è tutto. Non è possibile specificare la curva personalizzata solo una volta a causa del modo in cui funzionano i valori di transizione separati da virgole. L'intero elenco di valori viene ripetuto nell'ordine in cui sono stati specificati, anziché avere l'ultimo valore ripetuto all'infinito.

Vale a dire, se si esegue questa operazione:

element{ 
    transition-property: all, transform, background; 
    transition-duration: 700ms; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5); 
} 

Quello che succede è che il valore mancante per transition-timing-function è riempito come linear, non la tua curva personalizzata. Il risultato non corrisponderà alla transizione prevista per background.

E se si tenta di approfittare di che cambiando l'ordine delle proprietà di transizione in questo modo, in modo tale che il valore mancante per background assume la curva personalizzato invece:

element{ 
    transition-property: transform, all, background; 
    transition-duration: 700ms; 
    transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.5), linear; 
} 

Quello che succede è che il all la transizione sarà ignora la transizione transform, anche se l'hai specificata separatamente, perché all viene in seguito e include tutte le proprietà elencate in precedenza.

Answer 2

Per il meglio della mia conoscenza CSS (dopo un rapido google), il tuo metodo attuale è il modo più breve (e, quindi, il più "SECCO") di fare ciò che vuoi. Certo, non sono un guru dei CSS, quindi potrei sbagliarmi completamente.

Answer 3

Bene, il modo più SAREBBE sarebbe utilizzare qualcosa come SASS e scrivere un mixin, quindi usarlo invece di copiare il codice incollato ovunque. Un altro suggerimento che farò è di evitare l'uso di all, e invece di enumerare le proprietà che desideri animate tramite la transizione lineare. Anche se questo potrebbe essere più prolisso, sono disposto a scommettere che sarà molto più performante, specialmente se tu metti nello stile dell'elemento qualcosa come lo box-shadow.

Così, mentre il tuo modo avrebbe funzionato, mi sento come le transizioni più unico che hai, il più prezioso questa formulazione diventa:

element { 
    transition-duration: 2s; 
    transition-property: all, background, transform; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14, 1.5); 
} 

Naturalmente, ho raccomandato enumerare le proprietà, al fine di evitare le animazioni costosi e non richiesti . In questo caso, qualcosa di simile ha più senso:

element { 
    transition-duration: 2s; 
    transition-property: height, background, transform, width; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5), linear; 
} 

Edit: come detto da @BoltClock, mi sono sbagliato su tutto sotto di questo testo in grassetto, quindi per favore non tenerne conto. Gli argomenti separati da virgola vengono nuovamente applicati all'ordine in cui sono stati originariamente specificati, né la prima né l'ultima ripetizione per ulteriori valori transition-property.Continuo a pensare che quello che ho detto di non usare all sia un consiglio importante per le prestazioni e l'ambito futuro a prova di effetti!

prendere atto di come ho ordinato gli argomenti: se ci sono più argomenti per transition-property di transition-timing-function, il tutte le proprietà aggiuntivi imposterà il valore prima elencato per transition-property come il loro default. Quindi, prima inserisci un valore linear (predefinito), quindi enumera tutte le funzioni di temporizzazione univoche per far corrispondere la proprietà corretta, quindi tutte le proprietà modificate fino alla fine (ad esempio width) verranno automaticamente impostate su linear! Pertanto, anche se aggiungi altre 5 proprietà alla fine dell'elenco delle proprietà, solo background e transform avranno le loro uniche funzioni di cronometraggio cubic-bezier. Ad esempio:

element { 
    transition-duration: 2s; 
    transition-property: height, background, transform, width, oneProp, twoProp, threeProp, etcProp; 
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5); 
} 

Tutto nella precedente utilizza la funzione di temporizzazione linear tranne background e transform. Credo che questo sia un buon compromesso tra prestazioni e CSS ASCIUTTI. Ho fatto un jsFiddle per voi per controllare le varie opzioni - commenta il diverso CSS per provare ogni modo:

http://jsfiddle.net/530cumas/4/