Как сделать анимацию трансформирующую один элемент в другой?

Обладая достаточно посредственными знаниями CSS не могу понять как делается такая анимация.
Т.е. один элемент- кнопка превращается в другой - целую форму.
material_design_02.gif

Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?
Мой единственный вариант, что кнопке создается анимация, меняющая ее геометрию с круга на квадрат и выставляющая ее в абсолютное положение ровно над скрытым элементом формы, после окончания анимации кнопка прячется, а форма делается видимой, но для этого нужен JS?
  • Вопрос задан
  • 1055 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy
Creative frontend developer
Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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