Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Архитектура классов для анимации

Итак, вводная – нам нужно анимировать некие объекты на экране. Самый просто случай – это когда сам элемент интерфейса и нужно как-то изменять. Например, картинка должна увеличиться при наведении или кнопка должна начать светиться. Это просто, потому что анимируемый элемент уже находится в “DOMе” и ему нужно только поменять свойство, все остальное css сделает за нас.

Ситуация усложняется, когда анимировать сам элемент не получится. Например, у нас есть карточка с данными на экране и когда пользователь кликает на нее, то она вырастает на весь экран и заполняется дополнительными данными. Такой функционал вешать на ту же карточку, что уже сидит в “DOMе” нет смысла. Гораздо проще по клику создавать на ее месте (над ней) дополнительный объект, который уже и анимировать. Вот вопрос как раз в том, как сделать это качественнее.

Вопрос жизненный и может пригодится в приятных анимация. Например вот так:

todo-app-project-open-animatin

Давайте разбираться. Суть работы такой анимации в следующем:

Вот и все 🙂 Код всего этого дела ниже (не забудьте кликнуть на синий квадратик):

JS Bin on jsbin.com

Поделиться:
comments powered by Disqus