Объединить блок дисплея с непрозрачностью (вкладки начальной загрузки)?

Question

У меня есть элементы с 2 классами (исчезают и скрываются)

<div id="example" class="fade hidden"></div>

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

.hidden {display: none;}

При нажатии добавляется класс (.in и .shown)

.fade.in {
    opacity: 1;
}

.shown {display: block !important;}

Моя проблема в том,делая блок display: нет анимации с непрозрачностью.Просто элемент, показывающий в полном объеме.

В любом случае, чтобы анимация исчезла с непрозрачностью?

Answer 1

Вместо использования display можно использовать position: absolute.Смотрите следующий пример:

.fade {
  opacity: 0;
  transition: opacity 1s linear;
}

.hidden {
  position: absolute;
  pointer-events: none;
}

.fade.in {
  opacity: 1;
}

<button onclick="document.getElementById('example').className = 'fade in';">Click</button>
<div id="example" class="fade hidden">Example</div>
<p>Text...</p>