No hay una sola propiedad de CSS a la que busque cuando oculte y muestre cosas en CSS. Hay un montón de consideraciones que repasaremos en este video.
Por ejemplo, existe la displaypropiedad en la que display: none;es muy eficaz para ocultar cosas. Pero también ocultará ese elemento de la tecnología de asistencia, y no siempre lo desea, como un menú de navegación desplegable (los menús desplegables están ocultos visualmente, pero no deben ocultarse de la tecnología de asistencia).
Y displaytampoco es transicible, por lo que si desea hacer un fundido de entrada / salida de ese elemento transition, está desactivado. A menos que involucre a JavaScript para aplicar esa propiedad solo después de que haya ocurrido la transición.
¿Qué es transitable? opacityes, y resulta que visibilitytambién lo es. Esta combinación es bastante útil en conjunto, ya que una vez que un elemento lo tiene visibility: hidden;, no interfiere con eventos como clics / toques. Sin embargo, este combo no elimina el elemento del flujo de la página, lo que puede ser útil o no. La positionpropiedad podría ser útil en esas circunstancias.
¡Ver! ¡Tanto en qué pensar!