Рассмотрим следующую диаграмму:
У меня есть компонент «Маленькая подсказка», который по щелчку превращается в «Большой компонент». Они оба содержат компонент «Метка заголовка», хотя в маленькой подсказке он находится в центре, а в большой - вверху.
Всплывающая подсказка «Маленький» и «Большой» - это два разных компонента, и я бы предпочел, чтобы они оставались такими.
Я бы хотел оживить процесс - прямоугольник всплывающей подсказки должен расти, и при этом «Заголовок» будет подниматься к вершине большего прямоугольника. Какой самый простой способ добиться этого?
Я рассмотрел библиотеки анимации React, такие как React-Spring и Pose , но они, похоже, не поддерживают этот сценарий, они больше сосредоточены на внесении изменений в один компонент (или список компонентов).
Библиотеки, подобные Anime.JS , кажутся более подходящими, но мне нужно было бы сделать все вычисления самостоятельно - получение ссылок, проведение измерений и их синхронизация с методами жизненного цикла React.
Как правильно делать такие анимации?