Как правильно сделать анимацию с display:none?

Question

[Alex]

Есть вот такой фиксированный блок.
<div class="side-panel"></div>

.side-panel {
  position: fixed;
  top: 0;
  right: 0;

  transform: translate(400px, 0);
  transition: transform .3s

  height: 100%;
  width: 400px;
}

body.side-panel-opened .side-panel {
  transform: translate(0, 0);
}

По задумке, он плавно выплывает из-за правого края экрана. Но, сейчас, когда он за пределами экрана, он всё равно видимый. Я хочу, чтобы когда он скрылся, у него было свойство display: none
Те, изначально блок позиционирован за пределами экрана и не отображается. Потом, когда на родителе появляется соответствующий класс, элемент становится видимым и начинает плавно выезжать из-за края. Когда класс с родителя удаляется, элемент плавно уезжает за край экрана и когда полностью уедет — перестаёт отображаться.

Answer 1

[ma4t]

Можно добавить при удалении класса что-то вроде transition: display .3s

То есть у Вас есть время анимации для transform, задается такое же для дисплей и когда элемент уедет за "экран" , по истечении времени сработает транзишн дисплей none и блок пропадет...

скорее всего лучше через animation keyframes сделать, чтобы срабатывало на 100% (когда время истекает)
0% display: block
100% display: none

Comments

[Alex]

Свойство display же не анимируется, разве нет?

[Егор Скороходов]

Александр Козак, правильно, не анимируется. Правильнее всего, добиться такого поведения через js:
при срабатывании события скрытия добавляется класс, который сначала реализует анимирующееся поведение (например opacity: 1 --> opacity: 0, или любой transform), а потом вешает класс, дающий display: none;
и так же в обратном порядке.

Answer 2

[http404ntfnd]

.side-panel {
visibility: hidden;
opacity: 0;
-webkit-transition: visibility 1s,opacity .5s ease;
-o-transition: visibility 1s opacity .5s ease;
transition: visibility 1s opacity .5s ease;
}

body.side-panel-opened .side-panel {
visibility: visible;
opacity: 1;
}