Layout griglia animati CSS

Bramus

In CSS Grid, le proprietà grid-template-columns e grid-template-rows ti consentono di definire i nomi delle righe e di monitorare le dimensioni delle colonne e delle righe della griglia, rispettivamente. Il supporto dell'interpolazione per queste proprietà consente ai layout della griglia di passare facilmente da uno stato all'altro, invece di agganciarsi nel punto a metà di un'animazione o di una transizione.

Interpolazione dei valori in CSS

In CSS puoi passare senza problemi da un valore all'altro utilizzando la proprietà transition.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

Il motore di rendering rileverà automaticamente il tipo del valore della proprietà scelta come target e utilizzerà queste informazioni per passare senza problemi al nuovo valore.

Ad esempio:

• Vuoi eseguire la transizione di opacity da 0 a 1? Si tratta di un'interpolazione numerica.
• Vuoi eseguire la transizione di background-color da white a black? Effetto sfumato tra i colori di origine e di destinazione.
• Transizione di width? Interpola numericamente, convertendo le unità lungo il percorso, se necessario.

Lo stesso vale per le animazioni CSS, in cui il browser eseguirà l'interpolazione dei valori tra i fotogrammi chiave.

Animazione di grid-template-columns e grid-template-rows

I layout della griglia possono anche passare senza problemi da uno stato all'altro, anziché scattare a metà di un'animazione o di una transizione.

Nella demo seguente una griglia mostra diversi avatar. Per risparmiare spazio, gli avatar vengono disposti uno sopra l'altro limitando la larghezza di ogni colonna utilizzando grid-template-columns. Al passaggio del mouse, a ogni colonna viene concesso più spazio.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

Con la proprietà transition impostata, la griglia esegue un'interpolazione uniforme tra i valori.

L'effetto si applica anche alle animazioni che modificano i valori grid-template-columns o grid-template-rows.