Ответ
Плюсы:
- Плавная анимация через
transition - Элемент остается в DOM и доступен для взаимодействия (если не отключен
pointer-events) - Простота использования:
opacity: 0скрывает,opacity: 1показывает
Минусы:
- Элемент занимает место в верстке (в отличие от
display: none) - Может перекрывать клики на другие элементы (если не добавить
pointer-events: none) - Не скрывается от скринридеров (нужен дополнительно
aria-hidden="true")
Пример:
.button {
opacity: 0;
transition: opacity 0.3s;
pointer-events: none; /* Отключает взаимодействие */
}
.button.active {
opacity: 1;
pointer-events: auto;
}