Não existe apenas uma única propriedade CSS que você busca quando esconde e mostra coisas em CSS. Há um monte de considerações que veremos neste vídeo.
Por exemplo, existe a displaypropriedade em que display: none;é muito eficaz em esconder coisas. Mas também irá ocultar esse elemento da tecnologia assistiva, e você nem sempre quer isso, como um menu de navegação suspenso (os menus suspensos estão visualmente ocultos, mas não devem ser ocultados da tecnologia assistiva).
E displaytambém não é passível de transição, então se você quiser fazer o fade in / fade out desse elemento transition, está fora. A menos que você envolva o JavaScript para aplicar essa propriedade somente após a transição.
O que é transicionável? opacityé, e visibilityparece que é também. Essa combinação é muito útil em conjunto, pois uma vez que um elemento possui, visibility: hidden;ele não interfere em eventos como cliques / toques. Essa combinação não tira o elemento do fluxo da página, o que pode ser útil ou não. A positionpropriedade pode ser útil nessas circunstâncias.
Ver! Tanta coisa para pensar!