Почему из-за dispaly не происходит другая анимация?

Question

[pegas]

Вот пример Ясное дело что display не анимируется но Абзац же должен анимиироваться ведь там просто изменяется фон

Answer 1

[Сергей Горячев]

Так абзац у тебя не меняет класса, он показан, но скрыт другим блоком.
А цвет меняется, просто слишком быстро, чтобы заметить это) Но он работает)
Если посмотреть с задержкой - https://jsfiddle.net/afk8aox5/2/ - все хорошо.

Comments

[pegas]

Аналогичто https://jsfiddle.net/afk8aox5/1/

[Сергей Горячев]

Артём: Уже ответил выше.

[Сергей Горячев]

Артём: Цвет меняется, класс добавляется, но всё слишком быстро, чтобы заметить смену красного на синий у Р. Вот показал тебе с задержкой полсекунды, смену цвета видно.

[pegas]

Sergey Goryachev: и даже время перехода не меет значения? если например 10s поставить

[Сергей Горячев]

Артём: Используй opacity или visibility, https://jsfiddle.net/afk8aox5/3/ , тогда проблем не будет. Но с display такой финт не прокатит.

[Сергей delphinpro]

Sergey Goryachev: А вот и нифига =) Дело как раз в том, что свойство display анимируется дискретно.
Артём: Поясняю обоим:
Изначально элемент скрыт. он не отрисован. и его содержимое тоже. Добавили класс - блок отрисовался. Содержимое отрисовалось, но оно сразу отрисовалось так, как задано классом open. Анимировать нечего.
В примере Сергея с вызовом show() jquery переключает свойство display в block, обнуляет размеры и начинает анимировать элемент. Но элемент-то уже display:block, а значит отрисован, и его содержимое тоже. Show() вызывается перед addClass, а значит внутренний элемент изначально отрисовывается красным, а потом переходит в синий.
Всё понятно? =)

Вот пример техники анимирования в подобной ситуации https://jsfiddle.net/afk8aox5/

.

[Сергей delphinpro]

ссылка неверная, вот правильная - https://jsfiddle.net/afk8aox5/4/

[Сергей Горячев]

Сергей: position: static; ))) Мне кажется, зря я его не использую)

[pegas]

Сергей: Просто выбор за display потому что это для модульного окна которых много, и чтобы не загружать процессор (вдруг окно так и не откроют) лучше скрыть его вовсе. Не будет же оно висеть вечно https://jsfiddle.net/afk8aox5/5/

[Сергей delphinpro]

Артём: Это что было по ссылке? Я же показал как делается. =))