Как наилучшим образом анимировать переход элемента на передний план?

Question

[Александр]

Есть некий элемент на заднем плане. Поверх него отображается интерфейс. Необходимо сделать такую анимацию, в ходе которой элемент переместится в центр экрана и плавно выйдет на передний план поверх интерфейса. Я вот думаю, что наиболее простым вариантом будет сделать копию элемента с 0 прозрачностью поверх изначального элемента и интерфейса и запускать анимацию перехода к центру экрана одновременно для обоих элементов, а так же постепенно вывести копию элемента из прозрачности. Есть какие-то более адекватные решения данного вопроса? Будут ли у меня проблемы с синхронизацией анимации обоих элементов?

Comments

[Rustam Bainazarov]

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

Answer 1

[neosdios]

Зачем дубли..?
Положи элемент в обёртку. И оставь одну пустую обёртку вне интерфейса, на переднем плане.

Процесс анимации:
1. Скриптом вычисляем ширину-высоту обёртки, пока элемент в ней есть. Присваиваем обёртке полученные значения ширины и высоты. Теперь если элемент из неё выдернуть, она не схлопнется.
2. Вычисляем абсолютные значения отступа от левого и верхнего края элемента до края интерфейса. Позиционируем независимую обёртку по полученным значениям left и top. (интерфейс тоже в обёртке должен лежать, вся движуха внутри неё будет происходить от её краёв)
3. Блок с элементом вынимаем из его родной обёртки и кладём в обёртку на переднем плане. По идее, визуально он не должен и шелохнуться, ведь абсолютная позиция по отступам должна совпадать.
4. Перемещаем переднюю обёртку с элементом в центр экрана, а на интерфейсе проявляем тёмный overflow чтобы приглушить его а элемент визуально вынести на первый план и привести внимание к нему.

Условно говоря, исходно такое:

<div class="interface_wrapper"> 
	<div id="interface">
		...
		<div class="element_wrapper">
			<div class="element" id="element001">
			...
			</div>
		</div>
		...
	</div>
	<div class="element_wrapper" id="onfront_wrapper">
	
	</div>
</div>

Превратить условно в такое:

<div class="interface_wrapper"> 
	<div id="interface" class="overflow">
		...
		<div class="element_wrapper freezed" style="width: Xpx; height: Ypx;">

		</div>
		...
	</div>
	<div class="element_wrapper" id="onfront_wrapper" style="left: XXpx; top: YYpx;">
		<div class="element" id="element001">
		...
		</div>
	</div>
</div>

И всё на своих местах. Ну и все анимации перемещений лучше предварительно просчитав скриптом, реализовать на css анимациях. Так меньше нагрузка на проц.

Comments

[Александр]

Скорее всего вы меня не совсем правильно поняли. У меня интерфейс представляет из себя некие статические элементы поверх основного контента сайта. Для примеры вы можете себе представить какое-нибудь меню наверну экрана c position: fixed. И вот у меня есть элемент который при текущем положение скроллинга частично заезжает под меню. И вот мы на него кликаем и нам надо кроме как переместить элемент в центр экрана ещё и плавно поменять местами его и интерфейс (в данном случае меню). Если элемент в тот же момент поместить на передний план, то будет резкий скачёк между тем как он находится за меню, а на след. кадре уже поверх меню.