Как реализовать анимацию раскрытия элемента в модалку?

Хочу реализовать анимацию плавной трансформации элемента в модальное окно. Элемент, как и модальное окно имеет border-radius. Если банально попробовать через transform, то закругление на углах растянется не так как надо. Если анимировать размер элемента, то анимация не будет рендериться на GPU и на слабых устройствах будет тормозить. Что-то всё никак не могу придумать как бы это обыграть, чтобы и красиво и плавно.

В голову разве что приходит идея разбить элемент на углы и центральную часть. Углы просто переместить, а центральную часть растянуть. Но что делать если элемент не однотонный, а например представляет из себя изображение? Разбивать изображение на части и выполнять нетривиальные трансформации?

В идеале хотелось бы такую же анимацию как и на главной в appstore на ipad'е.

Пример конечных точек анимации прилагаю на скриншотах:
5da18580e09cd679827515.png
5da1858b3a267596076862.png
  • Вопрос задан
  • 240 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Основная фишка — элемент не трансформируется в реальную модалку.
Сначала вычисляется положение элемента и модалки.
Далее анимация элемента (положение, размеры)
И на месте элемента отображается модалка.
Для большей плавности можно добавить фэйд эффектов. Отобразить модалку сжатую на месте элемента прозрачную. Потом синхронно с элементом анимировать до реального положения. Во время анимации прозрачность модалки увеличивается, прозрачность элемента уменьшается.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы