Какой практический принцип работы морфинг анимации?

Question

[wiyod]

Как делать плавную морфинг анимацию, как работать с потоком документов, структурой дом дерева, позиционированием и тд? По какому принципу это должно происходить?

Вот смотрите пример - https://codepen.io/kodej/pen/aVvNJP

Все работает криво. Косяки: 1) Элемент после изменения на абсолют дергается в центр экрана 2) Остальные элементы смещаются

Как тогда реализовуется это все на практике? Как сделать чтобы при нажатии на картинку, она плавно становилась на весь экран, без скачков и без смещений других элементов на странице?

Comments

[Евгений Вольф]

Как сделать чтобы при нажатии на картинку, она плавно становилась на весь экран, без скачков и без смещений других элементов на странице?

Изначально задать ей такую позицию, при которой её положение не влияет на позиционирование других элементов, аки position: absolute;?

[wiyod]

Евгений Вольф, это нереализуемо в реальном мире на практике.

[Евгений Вольф]

wiyod, что именно нереализуемо? Лично у меня проблем с реализацией задачи "добавить CSS-свойство к элементу" - никогда не было.

[wiyod]

Евгений Вольф, вы похоже или в вопрос вникли или пишите вообще не подумав. При чем тут добавление свойств?

Еще раз. Вы мне предлагаете вырвать элемент из флоу и абсолютно его позиционировать? Вы вообще осознаете что за чушь пишите? А что тогда делать с соседними элементами? Вообще жесть какая-то.

[Евгений Вольф]

Вы вообще осознаете что за чушь пишите?

А Вы свою чушь? А так же то, как работает позиционирование элементов в браузере и что чисто логически должно произойти если два элемента влияют на размеры друг-друга и вдруг один из них становится больше/меньше (шире/уже)?