Alternar visibilidad al ocultar elementos | Programar Plus

El equipo de desarrollo de Medium ha discutido algunas malas prácticas que rompen la accesibilidad. En un ejemplo, argumentan que opacity no es compatible con los lectores de pantalla, por lo que si queremos ocultar un elemento en una transición, siempre debemos usar el visibility atributo, también:

.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}

Recuerde que la opacidad y la visibilidad aún dejan un elemento en el flujo del documento. Si necesita eliminarlo del flujo, hay más trabajo por hacer. De hecho, aquí tienes una forma de pensar en ellos …

puede hacer algo invisiblepuede hacer que no se pueda hacer clicelimina del flujo de documentospuede ser transicionalse puede revertir en el niño
opacidadyaNoNoNo
visibilidadyayaNo
monitoryayayaNoNo
puntero-eventosNoyaNoNoNo

Si necesita cambiar el valor de visualización de un elemento después de un desvanecimiento, eso es más difícil. Realmente no es posible en CSS desde display no es transitable. Snook ha escrito sobre esto, incluido algo de JavaScript para ayudar.

(Visited 4 times, 1 visits today)