Чем отличается скрытие элементов с помощью opacity, visibility и display: none?

Различия между методами скрытия:

• opacity: 0:

  • Элемент становится невидимым, но продолжает занимать пространство в layout.

  • Остается доступным для взаимодействия (события мыши, фокус и т.д.).

  • Можно анимировать плавное появление/исчезновение.

• visibility: hidden:

  • Элемент невидим, но сохраняет свое место в layout.

  • Не реагирует на события мыши (события не срабатывают).

  • Можно анимировать с помощью переходов.

• display: none:

  • Элемент полностью удаляется из потока документа.

  • Не занимает место, не реагирует на события.

  • Не может быть анимирован стандартными средствами CSS.

Практический пример:

.hidden-opacity {
  opacity: 0; /* Невидим, но место занято */
}

.hidden-visibility {
  visibility: hidden; /* Невидим, место занято, но не кликабельно */
}

.hidden-display {
  display: none; /* Полностью удален из layout */
}

Когда использовать:

• Используйте opacity для плавных анимаций прозрачности.

• Используйте visibility когда нужно скрыть элемент, но сохранить layout.

• Используйте display: none когда элемент нужно полностью удалить из документа.