Скрываемые элементы: display: none, visibility: hidden, opacity

Разница между display: none, visibility: hidden и opacity ️‍♂️

В CSS есть три популярных способа спрятать элемент, но каждый работает по-своему. Давай разберём их на атомы!

/* Примеры для сравнения */
.hide-display { display: none; }        /* Исчезает полностью */
.hide-visibility { visibility: hidden; } /* Невидим, но место занимает */
.hide-opacity { opacity: 0; }           /* Прозрачный, но кликабельный */

display: none — полное исчезновение ✨

Элемент полностью удаляется из потока документа. Браузер ведёт себя так, будто его никогда не существовало.

.ghost-button {
  display: none;  /* Пощёл — и нету! */
}

Что происходит:

• Элемент не отображается.
• Не занимает место в макете.
• Не реагирует на события (клики, ховеры).
• Анимации и переходы не работают.

💡 Идеально для динамического скрытия/показа через JS без сохранения пространства.

visibility: hidden — невидимый, но важный 👻

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

.invisible-man {
  visibility: hidden;  /* Спрятался, но тень осталась */
}

Особенности:

• Место в документе сохраняется.
• Содержимое недоступно для взаимодействия.
• Можно анимировать свойство visibility (появляется/исчезает плавно).

🔥 Профессиональный лайфхак: комбинируй с opacity для плавных переходов!

.fade-in {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.fade-in.active {
  visibility: visible;
  opacity: 1;
}

opacity: 0 — элемент-призрак 👀

Элемент становится полностью прозрачным, но остаётся полноценным участником документа.

.ghost-element {
  opacity: 0;  /* Ничего не видно, но он здесь! */
}

Ключевые моменты:

• Занимает место в макете.
• Остаётся кликабельным и интерактивным.
• Идеально для анимаций появления/исчезновения.
• Можно использовать с pointer-events: none для отключения взаимодействия.

Сравнительная таблица

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

Выбираем display: none когда:

• Нужно полностью убрать элемент из потока (модальные окна, табы).
• Требуется максимальная производительность (скрытие сложных компонентов).

Выбираем visibility: hidden когда:

• Важно сохранить макет (например, скрытые колонки таблицы).
• Нужен плавный переход без "прыжков" вёрстки.

Выбираем opacity: 0 когда:

• Элемент должен оставаться интерактивным (кастомные чекбоксы).
• Нужны сложные анимации (постепенное исчезновение).

Практический пример: меню-аккордеон 🎹

<div class="accordion">
  <button class="accordion-btn">Раздел 1</button>
  <div class="accordion-content">
    <p>Скрытый контент, который появится при клике</p>
  </div>
</div>

.accordion-content {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-content.active {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

Почему так круто?
Комбинация свойств даёт плавную анимацию высоты и прозрачности без "дёрганий" вёрстки!

Частые ошибки и как их избежать 🚧

1. Использование display: none для анимаций
   Не работает — элемент мгновенно исчезает. Вместо этого стартуй с opacity: 0.

2. Забыть про visibility при анимациях
   Без него прозрачный элемент (opacity: 0) остаётся кликабельным!

3. Ненужные рефловы при toggle display
   Частое переключение display: none ↔ block вызывает пересчёт макета — это дорого для производительности.

Попробуй применить эти знания в своём следующем проекте — результат тебя удивит! 🔥