Transicionar hacia display: none en CSS

El truco que antes pedía un timeout: dos líneas extra y el elemento puede animar su salida.

.popover {
  opacity: 0;
  display: none;
  transition: opacity 200ms ease, display 200ms allow-discrete;
}

.popover.is-open {
  opacity: 1;
  display: block;
}

@starting-style {
  .popover.is-open { opacity: 0; }
}

dialog::backdrop {
  background: rgb(15 23 42 / 0.4);
  transition: opacity 200ms ease, overlay 200ms allow-discrete;
}

Cómo funciona

transition-behavior: allow-discrete deja participar a display.
@starting-style le da al navegador un valor desde el cual animar en el primer pintado.
overlay mantiene visible un elemento de la capa superior mientras se anima al salir.

Palabras clave y builtins usados aquí

background
display
ms
opacity
rgb
transition

El intento, en números

Líneas: 19
Caracteres a escribir: 322
Tokens: 80
Ritmo de tres estrellas: 90 tpm

Al ritmo de tres estrellas de 90 tokens por minuto, este intento toma unos 53 segundos.

Escribe este fragmento

Paso 2 de 8 en Movimiento y efectos; paso 12 de 21 en CSS responsivo y moderno.

← Anterior Siguiente →