Ridurre al minimo il codice per una transition CSS

Siamo di solito abituati a scrivere il css relativo alle transition definendo tutti i valori relativi alle varie proprietà. Nella maggior parte delle volte alcuni di loro non serve che vengano specificati. Vediamo nel dettaglio come rendere essenziale il nostro codice.
Ridurre al minimo il codice per una transition CSS

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “The Minimum Code for a CSS Transition” di Louis Lazaris.

Alcuni esempi familiari

Ecco qualcosa di interessante che magari non sapete a proposito delle transition CSS3. Normalmente, vedrete una transition dichiarata più o meno così:

.example {  
    transition: background-color .5s ease-out;  
} 

o magari scritta per esteso, come questa:

.example {  
    transition-property: background-color;  
    transition-duration: .5s;  
    transition-timing-function: ease-out;  
}

In entrambi i casi, stiamo dichiarando esplicitamente tre delle quattro proprietà legate alle transition (tralasciando “transition-delay”).

Può esistere una transition scritta con meno codice di quello appena visto? Beh, sì. Ecco il codice minimo richiesto per una transition:

.example {  
    transition: 4s;  
} 

Sto usando la sintassi abbreviata nell’ultimo esempio, ma l’unica cosa che ho definito è la “transition-duration” (il browser deduce sempre che il primo valore inserito sia la durata).

Questa non è scienza per cervelloni, e molti di voi probabilmente l’hanno capito, ma ecco qui un esempio per mostrarvi ciò di cui sto parlando:

See the Pen EDyiA by Louis Lazaris (@impressivewebs) on CodePen

Aggiornamento: stranamente, poichè di recente sono un po’ un “drogato di Chrome”, non mi sono accorto che gli altri browser se ne stanno occupando in modo un po’ diverso (come sottolineato da Sime Vidas). Gli altri browser creano una dissolvenza in entrata dell’elemento, apparentemente modulando la sua opacità, ma non la width/height (larghezza/ altezza). La mia reazione iniziale è che il comportamento di Chrome è corretto, a causa di quanto spiegato sotto riguardo ai valori iniziali.

Il tasto “toggle” ti permette di rimuovere/aggiungere tutti gli stili che vengono applicati al singolo elemento della pagina. Quando lo stile è “on”, si verificherà la transition. Se cliccate per vedere il CSS, vedrete che l’unico valore incluso nella scrittura abbreviata della transition è la durata. Le altre proprietà (transition-property e transition-timing-function) vengono omesse.

Perché funziona?

Le ragioni per cui funziona sono duplici:

  • Il valore iniziale, o di default, per la transition-property è “all”, il che significa che tutte le proprietà che possono essere animate applicate all’elemento si moduleranno quando si verifica un rilevante cambio di stato
  • Il valore iniziale per la transition-timing-function è “ease”

A causa di come funziona CSS, questo significa che quelle due proprietà avranno un valore che il browser prende di default – anche se non le dichiari.

Può sembrare strano che il browser calcoli automaticamente quelle due proprietà in un modo così specifico, piuttosto che usare un generico “none” o qualcosa di simile. Ma per quelle specifiche proprietà non ha importanza – perchè senza una determinata transition-duration (che di default è “0s”), quelle proprietà omesse vengono rese inefficaci.

Riassunto

Come mostrato nell’embed di CodePen, è davvero un modo molto semplice di rendere animati gli elementi di una pagina quando la pagina si sta caricando. Per esempio, se andate sulla pagina completa di quella demo, vedrete che l’elemento andrà al suo posto durante il caricamento della pagina, invece che apparire subito a grandezza naturale. Naturalmente, nella maggior parte dei casi, vorrete avere il controllo totale di queste animazioni, per ragioni di performance e di UX, piuttosto che permettere alle proprietà “all” di animare di default come in quel caso.

Aggiornamento: ne consegue che la transition nel caricamento della pagina iniziale avviene solo su CodePen probabilmente perchè CodePen sta inserendo gli stili e creando un nuovo “stato”. L’ho interpretato male come una sorta di azione di default del browser stesso, che anima le proprietà “all”. Tuttavia, rimane la questione principale: avete bisogno solo di una durata perchè una transition funzioni, ma dovete anche assicurarvi che ci siano diversi stati definiti da transition intermedie.

Di nuovo, non si tratta di un consiglio particolarmente complesso, ma può essere già qualcosa che molti sviluppatori CSS non sanno ancora. Per molte proprietà CSS i valori iniziali spesso passano inosservati, quindi tenetelo a mente.

Inoltre, se volete un accesso veloce al valore iniziale per qualunque proprietà CSS, potete usare il mio sito di recensioni “CSS Values”. Il primo valore elencato per ogni proprietà è il valore iniziale, o default, per quella proprietà.

  • Io solitamente tendo a scriverle per esteso; più che altro per una maggiore chiarezza del codice e per evitare che il browser “sfigato” di turno interpreti il valore di default in maniera diversa.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github