Entonces, le gustaría animar la propiedad de visualización

El grupo de trabajo de CSS le dio un pulgar hacia arriba hace un par de semanas. La super-duper propuesta conceptual es que podemos animar o pasar de, digamos, display: block a display: none.

Es un poco complicado razonar porque establecer display: none en un elemento cancela las animaciones. Y agregarlo reinicia las animaciones. Según la especificación:

Configurando el display propiedad a none terminará cualquier animación en ejecución aplicada al elemento y sus descendientes. Si un elemento tiene una visualización de ninguno, actualizar la visualización a un valor que no sea none iniciará todas las animaciones aplicadas al elemento por el animation-name propiedad, así como todas las animaciones aplicadas a los descendientes con display que no sea none.

Ese comportamiento circular es lo que hace que el concepto parezca muerto al llegar. Pero if @keyframes apoyado cualquier display propuesta de que no sea none, entonces no hay forma de none para cancelar o reiniciar las cosas. Eso da no-none prioridad de los valores, lo que permite none para hacer su trabajo solo después de que se haya completado la animación o la transición.

de miriam sonar (así es como los llamamos realmente, ¿verdad?) explica cómo podría funcionar:

No estamos interpolando exactamente entre, digamos, block y none, pero permitiendo block permanecer intacto hasta el momento en que las cosas dejen de moverse y sea seguro aplicar none. Estas son palabras clave, por lo que no hay valores explícitos entre las dos. Como tal, esto sigue siendo una animación discreta. Estamos alternando entre dos valores una vez que se completa la animación.

Este es el Roberto FlackEl ejemplo de 's extraído directamente de La discusión:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

Este es un ejemplo útil porque muestra cómo el primer cuadro establece el elemento para display: block, que tiene prioridad sobre el subyacente display: none como nonone valor. Eso permite que la animación se ejecute y finalice sin none cancelarlo o restablecerlo en el proceso ya que solo resuelve después de la animación.

Este es el ejemplo al que Miriam hace referencia en Mastodon:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

Estamos lidiando con una transición esta vez. el subyacente display el valor está configurado para none antes de que suceda algo, por lo que está completamente fuera del flujo de documentos. Ahora, si tuviéramos que hacer la transición al pasar el mouse, tal vez así:

.hide:hover {
  display: block;
  opacity: 1;
}

…entonces el elemento teóricamente debería desvanecerse en 200ms. Nuevamente, estamos alternando entre display valores, pero block tiene prioridad, por lo que la transición no se cancela por adelantado y se aplica después opacity termina su transición.

Al menos así es como mi mente lo está leyendo. Me alegro de que haya gente súper inteligente pensando en estas cosas porque me imagino que hay mucho que resolver. Por ejemplo, ¿qué sucede si se asignan varias animaciones a un elemento? none restablecer o cancelar alguno de esos? Estoy seguro de que todo, desde animaciones infinitas, direcciones invertidas y todo tipo de otras cosas, se abordará con el tiempo.

¡Pero qué primer paso tan genial!