Layout griglia animati CSS

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

Bramus

Interpolazione dei valori in CSS

In CSS puoi trasferire facilmente le proprietà 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 di valore della proprietà scelta come target e utilizzerà queste informazioni per passare facilmente al nuovo valore.

Ad esempio:

• Stai eseguendo la transizione di opacity da 0 a 1? Questa è un'interpolazione numerica.
• Stai eseguendo la transizione di background-color da white a black? Dissolvenza tra i colori di origine e quelli di destinazione.
• Stai eseguendo la 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.

Interpolazione di grid-template-columns e grid-template-rows in corso...

Grazie ai nostri collaboratori di Microsoft, Chrome, a partire dalla versione 107, è in grado di interpolare i valori grid-template-columns e grid-template-rows.

I layout della griglia possono passare agevolmente da uno stato all'altro, invece di agganciarsi a metà strada di un'animazione o transizione.

Nella demo sotto una griglia mostra diversi avatar. Per risparmiare spazio, gli avatar vengono disposti uno sopra l'altro limitando la larghezza di ogni colonna con grid-template-columns. Al passaggio del mouse, a ogni colonna viene dato 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);
}

Quando la proprietà transition è attiva, 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.

Parte della serie Newly interoperable