React плавно разворачивает карточку продукта в полноэкранный режим [закрыто] ⇐ CSS

[Anonymous]

Я создаю одностраничное приложение для электронной коммерции. Страница продуктов основана на карточках в адаптивной сетке. Я хочу сделать карточку, которая разворачивалась бы при нажатии в полноэкранном режиме с помощью чего-то вроде весенней или легкой анимации, чтобы увидеть полную страницу продукта.
Проблема в том, что карта привязана к сетке и не всегда находится в центре. И все, что я пытался сделать с помощью CSS-анимации, выглядело ужасно с точки зрения анимации и было похоже на велосипед с точки зрения кода.
Я просто хотел спросить, каков вкратце лучший способ добиться этого? , какой путь мне выбрать? И действительно ли это возможно с той сеткой, которая у меня сейчас есть, или мне стоит попробовать что-то другое? Я подумал об использовании Framer Motion в качестве библиотеки анимации.
Здесь вы можете увидеть нечто похожее на то, чего я хочу добиться: =10
А вот упрощенный codesandbox того, что у меня есть сейчас: https://codesandbox.io/s/dank-water-o2lpp



Подробнее здесь: https://stackoverflow.com/questions/628 ... fullscreen