Transition и display:none. Плавное исчезновение и резкое появление. Почему?

Question

[Александр]

jsfiddle.net/drn2kgch
Исчезает плавно, а появляется мгновенно.

Почему нет анимации, ведь сначала удаляется display: none, а только потом устанавливается opacity.

f.classList.remove('hide');
f.style.opacity = 1;

Comments

[Ankhena]

Свойство display не анимируется. Как вы себе представляете промежуточное состояние между block и none или еще смешнее между block и flex?
Решение https://webformyself.com/animaciya-ot-display-bloc...

[Александр]

Я свойство display не анимирую. Смотрите внимательней. Вопрос в другом.

Answer 1

[Андрей Токмаков]

Может быть потому что вы убираете плавно (hide), а показываете резко, установив opacity: 1

Comments

[Александр]

Там прописан transition , который дает плавность. Но он не работает, вот в этом и вопрос.

[Андрей Токмаков]

Александр, Где прописан? Не вижу в упор. В вопросе 2 строчки кода

[Александр]

Андрей Токмаков, jsfiddle.net/drn2kgch в начале как бы

[Андрей Токмаков]

Александр, в .hide вместо display: none пропишите opacity: 0; и будет чудо

[Александр]

Андрей Токмаков, чуда не будет, т.к. элемент будет на странице. Просто невидимый.

[Андрей Токмаков]

Александр, Вы определитесь уже конкретно что хотите от элемента

[Андрей Токмаков]

Александр, добавьте Вашему кружочку display: block; что бы он хоть знал что анимировать из display: none и все у Вас получится

jsfiddle.net/drn2kgch/1

[Александр]

Андрей Токмаков, спасибо, как вариант можно и так.

Answer 2

[iBird Rose]

jsfiddle.net/drn2kgch/2

Comments

[Андрей Токмаков]

Он ж сказал, ему конкретно нужен display: none;