Entonces, le gustaría animar la propiedad display | trucos CSS

El grupo de trabajo de CSS le dio a esto un pulgar hacia arriba hace unas semanasLa proposición conceptual super-duper es que podemos animar o pasar de, digamos, display: block a display: none.

Es un poco un dolor de cabeza razonar porque la configuración display: none en un elemento cancela las animaciones. Y agregarlo reinicia las animaciones. Según la especificación:

Configuración de display propiedad a none terminará cualquier animación en ejecución aplicada al elemento y sus descendientes. Si un elemento no tiene pantalla, actualizar la pantalla a un valor que no sea none iniciará cualquier animación aplicada al elemento desde animation-name propiedad, así como cualquier animación aplicada a los descendientes con display diferente de none.

Este comportamiento circular es lo que hace que el concepto parezca muerto al llegar si @keyframes cualquier compatible display valor diferente de noneentonces no hay manera de none para deshacer o reiniciar cosas. Esto no da-none habilitación de prioridad de valores none para hacer su trabajo solo después de que se complete la animación o la transición.

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

No interpolamos exactamente entre, digamos, block y nonepero permitiendo block permanecer intacto hasta que las cosas dejen de moverse y sea seguro aplicar noneEstas son palabras clave, por lo que no hay valores explícitos entre los dos. Como tal, sigue siendo una animación separada. Cambiamos entre dos valores una vez finalizada la animación.

Está Roberto Flackel ejemplo de está tomado 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 configura el elemento. display: blockque tiene prioridad sobre el principal display: none como no-none Esto permite que la animación se ejecute y se complete sin none cancelarlo o restablecerlo en el proceso, ya que solo permite después la animación.

Este es el ejemplo citado por Miriam en Mastodon:

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

Esta vez nos enfrentamos a una transición. display el valor se establece en none antes de que suceda algo, por lo que está completamente fuera del flujo de documentos. Ahora, si pasamos esto al pasar el mouse, tal vez así:

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

…entonces el elemento teóricamente debería desaparecer en 200msNuevamente cambiamos entre display valores pero block se le da prioridad para que la transición no se cancele de antemano y se aplique después opacity completa su transición.

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

¡Pero qué gran primer paso!