Как обойти проблему возможности анимировать состояния display — none/block?

Question

[Ingernirated]

Функция должна сработать на transitionend, но т.к. переключая блоки свойством display:none -> block, то здесь анимация никак не происходит и transitionend не отработает.
opacity тоже не вариант, потому что надо предыдущий блок прятать и по необходимости возвращать.
https://jsfiddle.net/s3gLnmt4/

Answer 1

[Senseich]

Вот хороший пример: https://jsfiddle.net/jmzpvm2e/4/

Надо использовать visibility и opacity

Answer 2

[Mikola-BLR]

Всё нормально с opacity работает.
https://jsfiddle.net/7v9jy1z0/4/
Можно после завершения анимации самому блоку задать display: none, если так принципиально.

Answer 3

[Ernest Faizullin]

использовать изменение высоты или ширины со свойством overflow: hidden