Как сделать анимацию перехода на страницу?

Question

[G F]

Есть страница с гридом изображений. При нажатии на изображение осуществляется плавный переход на страницу с подробным описанием (Изображение как бы остаётся на месте (иногда увеличиваясь), а контент вокруг него меняется). Думаю многие видели такой переход, стало любопытно как это можно реализовать. Например на рекате, но если есть примеры на обычном хтмле тоже норм, мне главное уловить принцип.

Comments

[WapSter]

Хз как на счет реакта, но во vue можно зацепиться за жизненный цикл.

[historydev]

WapSter, я бы создал компонент с анимацией и активировал его при каждом переходе

[G F]

Спасибо за ответы пришло кое-что в голову надо будет затестить.

Answer 1

[Сергей Сунцев]

Реакт это всего лишь инструмент для работы с состоянием.
Вот у вас есть состояние 1 - это страница с гридом изображений.
При нажатии вы меняете состояние на 2 - это страница с контентом данного изображения.

Для самой логики анимации можно воспользоваться соответствующими css свойствами, либо воспользоваться js-реакт либами для анимаций, типа framer.motion