Существует не просто одно свойство CSS, к которому вы стремитесь при скрытии и отображении объектов в CSS. Есть несколько моментов, которые мы рассмотрим в этом видео.
Например, есть displayсвойство, в котором display: none;очень эффективно прятать вещи. Но он также скроет этот элемент от вспомогательных технологий, а вы не всегда этого хотите, например, выпадающее меню навигации (выпадающие списки визуально скрыты, но не должны быть скрыты от вспомогательных технологий).
И также displayне является переходным, поэтому, если вы хотите, чтобы этот элемент постепенно увеличивался / затухал с помощью transition, это убирается. Если вы не задействуете JavaScript для применения этого свойства только после того, как произошел переход.
Что можно переходить? opacityесть, и получается visibilityтоже. Эта комбинация очень полезна вместе, поскольку, если элемент есть, visibility: hidden;он не мешает событиям, таким как щелчки / касания. Однако эта комбинация не выводит элемент из потока страницы, что может быть полезно или бесполезно. positionСвойство может быть полезным в тех обстоятельствах.
Видеть! Так много надо думать!