transition-behavior: allow-discrete y la propiedad overlay

transition-behavior es la quinta propiedad de las transiciones, añadida por el nivel 2 de la especificación con un único valor útil: allow-discrete. Su trabajo es permitir que las propiedades discretas participen en una transición en lugar de cambiar de golpe, y con ella se desbloquean tres propiedades que resuelven el problema de la aparición: display, content-visibility y overlay. La tercera tiene un estado de soporte que hay que conocer antes de construir nada encima.

Las dos formas de escribirlo

Como palabra clave dentro de una entrada de la abreviatura, que es la forma recomendada:

.panel {
  transition:
    opacity 240ms ease-out,
    display 240ms allow-discrete;
}

Como propiedad independiente, que aplica a todas las entradas de la lista:

.panel {
  transition: opacity 240ms ease-out, display 240ms;
  transition-behavior: allow-discrete;
}

La primera es preferible por dos razones. La primera es que casi nunca quieres allow-discrete para todas las propiedades: lo quieres para la propiedad discreta concreta. La segunda es que la propiedad independiente tiene una trampa de orden que la abreviatura no tiene.

La trampa de orden

transition-behavior forma parte de la abreviatura transition. Como toda abreviatura de CSS, reinicia a su valor inicial las propiedades que la componen y que no menciones. Es decir, escribir transition: ... después de transition-behavior: allow-discrete borra el allow-discrete.

/* Roto: la abreviatura viene despues y reinicia el comportamiento. */
.mal {
  transition-behavior: allow-discrete;
  transition: opacity 240ms, display 240ms;
}

El síntoma es exactamente el mismo que si no hubieras escrito nada: el elemento desaparece de golpe. Y el CSS se lee correcto, porque las dos declaraciones están ahí. Es el tipo de error que sobrevive a varias revisiones de código.

La forma de comprobarlo sin dudar:

console.log(getComputedStyle(panel).transitionBehavior);
// "normal" si se ha perdido, "allow-discrete" si esta bien

Las tres propiedades que desbloquea

display. La más importante. Con allow-discrete, el motor aplica la regla especial que vimos en la lección anterior: el elemento se renderiza durante toda la transición, en las dos direcciones. Eso es lo que permite que un elemento salga del flujo por completo cuando está cerrado, sin perder la animación de salida.

content-visibility. Misma lógica, aplicada a la propiedad que permite al motor saltarse el renderizado de un subárbol. Sirve para listas y acordeones donde quieres el ahorro de content-visibility: hidden y a la vez una apertura animada.

.seccion-plegable {
  content-visibility: hidden;
  opacity: 0;
  transition:
    opacity 200ms ease-out,
    content-visibility 200ms allow-discrete;
}

.seccion-plegable[data-abierta] {
  content-visibility: visible;
  opacity: 1;
}

overlay. Es la propiedad más peculiar de las tres, porque no la puedes establecer tú: es una propiedad que solo controla el navegador, y lo único que puedes hacer con ella es listarla en transition-property para retrasar el momento en que su valor cambia.

Qué hace overlay exactamente

Cuando un elemento se muestra en la capa superior —un dialog abierto con showModal(), o un elemento con el atributo popover mostrado— el navegador lo saca de su posición normal en el orden de pintado y lo dibuja por encima de todo el documento, ignorando índices de apilamiento, recortes y desbordamientos.

Al cerrarlo, el navegador lo devuelve a su sitio inmediatamente. Y ahí está el problema: si el elemento tiene una transición de salida de 300 milisegundos, durante esos 300 milisegundos ya no está en la capa superior, así que puede quedar tapado por cualquier cosa que estuviera por encima de él en el documento, o recortado por un ancestro con overflow: hidden. El resultado típico es que la animación de salida no se ve, o se ve a medias.

overlay es la propiedad que representa “estoy en la capa superior”, y listarla en la transición con allow-discrete hace que su cambio se retrase hasta el final: el elemento se queda en la capa superior mientras dura la salida.

[popover] {
  opacity: 1;
  transition:
    opacity 240ms ease-out,
    display 240ms allow-discrete,
    overlay 240ms allow-discrete;

  @starting-style { opacity: 0; }
}

[popover]:not(:popover-open) {
  opacity: 0;
}

El estado de soporte, en una tabla

La estrategia que se deriva de la tabla es escribir el patrón completo, incluyendo overlay, y no depender de ella para que la interfaz funcione. Es una mejora, no un requisito.

Detectar el soporte cuando importe

Si tienes un caso donde la diferencia sí es funcional, la detección es directa:

/* Camino base: salida corta, se corta poco si no hay overlay. */
[popover] {
  transition:
    opacity 140ms linear,
    display 140ms allow-discrete;
}

/* Mejora: con overlay se puede permitir una salida mas larga. */
@supports (overlay: auto) {
  [popover] {
    transition:
      opacity 280ms ease-out,
      display 280ms allow-discrete,
      overlay 280ms allow-discrete;
  }
}

Y para comprobar desde JavaScript si el motor conoce la propiedad:

const tieneOverlay = CSS.supports('overlay', 'auto');

Fíjate en que @supports (overlay: auto) comprueba que el motor sabe analizar la propiedad, no que la implemente bien. Es la limitación habitual de la detección de características y en este caso es suficiente, porque no hay motores que la analicen sin implementarla.