Animación de una cuadrícula CSS (instrucciones + ejemplos) | trucos CSS

Me complace aclarar el hecho de que CSS grid-template-rows y grid-template-columns las propiedades son ahora se puede animar en todos los principales navegadores webBueno, CSS Grid ha soportado técnicamente animaciones durante mucho tiempo. horneado directamente en la especificación de nivel 1 del módulo de diseño de cuadrícula CSS.

Pero la animación de estas propiedades de la cuadrícula solo ha sido admitida recientemente por los tres navegadores principales. ¿Vamos a ver algunos ejemplos para que fluya la creatividad?

Ejemplo 1: barra lateral expandible

En primer lugar, esto es de lo que estamos hablando:

Una cuadrícula simple con dos columnas. Ahora, antes, podías no creó esto usando CSS Grid ya que las animaciones y las transiciones no eran compatibles, pero ¿qué sucede si desea que la columna izquierda, tal vez una barra de navegación lateral, se expanda en espera? Bueno, ahora es posible.

Sé lo que estás pensando: "¿Animar una propiedad CSS? ¡Fácil, lo he estado haciendo durante años!" Yo también. Sin embargo, me encontré con un problema interesante mientras experimentaba con un caso de uso particular.

Entonces, queremos transferir la cuadrícula en sí (específicamente grid-template-columnsque se establece en .grid clase en el ejemplo). Pero la columna de la izquierda (.left) es el selector que requiere :hover Si bien JavaScript puede resolver fácilmente este enigma, gracias, pero no gracias, solo podemos lograrlo con CSS.

Repasemos todo, comenzando con HTML. Cosas bastante estándar realmente... una cuadrícula de dos columnas.

<div class="grid">
  <div class="left"></div>
  <div class="right"></div>
</div>

Dejando de lado el CSS cosmético, primero debe configurar display: grid del contenedor principal (.grid).

.grid {
  display: grid;
}

Luego podemos definir y dimensionar las dos columnas usando grid-template-columns propiedad. Haremos que la columna de la izquierda sea súper estrecha y luego aumentaremos su ancho en espera. La columna de la derecha ocupa el resto del espacio, gracias a la auto palabra clave.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
}

Sabemos que vamos a animar esta cosa, así que hagamos un transition allí mientras estemos allí para que el cambio entre estados sea suave y perceptible.

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* Change as needed */
}

Eso es todo por .grid! Todo lo que queda es implementar el estado de espera. Específicamente, reemplazaremos grid-template-columns propiedad para que la columna de la izquierda ocupe una mayor cantidad de espacio en espera.

Esto en sí mismo no es tan interesante, aunque es genial que las animaciones y las transiciones ahora sean compatibles con CSS Grid. Más interesante aún, podemos usar el relativamente nuevo :has() pseudoclase para diseñar el contenedor principal (.grid), mientras que el niño (.left) Es retenido.

.grid:has(.left:hover) {
  /* Hover styles */
}

En inglés sencillo esto se llama, “Haz algo en .grid contenedor si contiene un elemento con nombre .left dentro de él que está en un estado de levitación". es por eso :has() a menudo llamado el selector "padre". Finalmente, podemos seleccionar un padre en función de los niños que contiene, ¡no se requiere JavaScript!

Así que vamos a aumentar el ancho de la .left columna a 30% al moverse .right la columna seguirá ocupando todo el espacio restante:

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: 48px auto;
}

.grid:has(.left:hover) {
  grid-template-columns: 30% auto;
}

También podemos usar variables CSS, que pueden verse más limpias o no según sus preferencias personales (o aún puede usar variables CSS en su proyecto):

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: var(--left, 48px) auto;
}

.grid:has(.left:hover) {
  --left: 30%;
}

yo amar que las cuadrículas CSS se pueden animar ahora, pero el hecho de que podamos construir este ejemplo en particular con solo nueve líneas de CSS es aún más sorprendente.

Aquí hay otro ejemplo de olivia ng — concepto similar pero con contenido (haga clic en el icono de navegación):

Ejemplo 2: Paneles extensibles

Este ejemplo transfiere el contenedor de la cuadrícula (los anchos de columna) pero también las columnas individuales (sus colores de fondo). Es ideal para proporcionar más contenido en espera.

Vale la pena recordar que repeat() a veces crea transiciones con errores, por lo que configuro el ancho de cada columna individualmente (es decir, grid-template-columns: 1fr 1fr 1fr).

Ejemplo 3: Adición de filas y columnas

Este ejemplo "agrega" animadamente una columna a la cuadrícula. Sin embargo, lo adivinó, este escenario también tiene una trampa. El requisito es que la columna "nueva" no esté oculta (es decir, configurada en display: none), y la cuadrícula CSS debe reconocer su existencia mientras establece su ancho en 0fr.

Entonces, para una cuadrícula de tres columnas: grid-template-columns: 1fr 1fr 0fr (sí, se debe declarar la unidad, aunque el valor sea 0!) pasa a grid-template-columns: 1fr 1fr 1fr cierto, pero grid-template-columns: 1fr 1fr En retrospectiva, esto tiene mucho sentido dado lo que sabemos sobre cómo funcionan las transiciones.

Aquí hay otro ejemplo de michelle barker — el mismo concepto pero con una columna adicional y un montón Asegúrese de ejecutar este en modo de pantalla completa porque en realidad responde (sin trampas, ¡solo un buen diseño!).

Algunos ejemplos más

¿Porque, porque no?

Este "Mondrian animado" es la prueba de concepto original para las cuadrículas CSS animadas de Chrome DevRel.Él grid-row'arena grid-columnusamos span palabra clave para crear el diseño que ve ante usted, y luego grid-template-row'arena grid-template-columnestán animados usando animación CSS. No es por complicado que parezca!

Mismo concepto, pero con más de esa pizza de Michelle Barker. ¿Podría ser un buen hilandero para botas?

Terminando con un poco de nostalgia (aquí se muestra mi edad), la cuadrícula CSS animada no tan mallada de andres harvardNuevamente, el mismo concepto, simplemente no puede ver los otros elementos de la cuadrícula. Pero no te preocupes, están ahí.