Как визуализировать анимацию из «none» в «block»?

Question

[Ingernirated]

Из блока в нан всё чётко, а из нан в блок ничего.
https://jsfiddle.net/u2Lxner6/1/

Answer 1

[Антон Спирин]

Используйте opacity. Пример

Answer 2

[Алексей]

Transition не будет работать с display. Для плавной анимации нужно применять Visibility.

Comments

[Антон Спирин]

transition не будет работать с visibility, надо использовать opacity

Answer 3

[Дмитрий]

Пример

Answer 4

[Sagrana]

Вам надо при клике на блок добавлять к нему класс (например show-block) и потом проверять на его наличие.
как-то так
А для плавной анимации замените display на какой-нибудь вариант, из предложенных)