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

Решение проблемы с анимацией preact, react

В продолжение предыдущего поста “Баг с анимацией в списке“. Проблема была с тем, что не были указаны ключи для элементов в списке. Preact на это не ругается, а просто перестает работать адекватно, react же начинает писать предупреждения в консоли и всячески привлекать внимание. Тут однозначно 1:0 в пользу старшего брата. Однако, только добавив ключи проблема

Баг с анимацией в списке – preact

Обнаружилась достаточно интересная сложность в работе с анимацией в preact (вполне возможно, что она относится и к реакту, я пока не тестировал). Все связанно с тем, что фреймворк хочет по-максимому реиспользовать элементы DOM’а и старается где можно (с его точки зрения) просто менять текст, а не удалять ноды. Все бы ничего, но такой подход начинает

CSS библиотека спиннеров – анимации ожидания

Css-loaders – это библиотека спиннеров для анимации ожидания. Это может быть как загрузка данных, обработка запросов, да все что угодно. Картинки вообще не используются (ни гифки, ни svg), вся анимация на css3, соответственно не все браузеры поддерживаются: IE 10+ ✔ Chrome 4.0+ ✔ Firefox 16.0+ ✔ Opera 15.0+ ✔ Safari 4.0+ ✔ Однако, если ваш

Размытие в движении на CSS3 – Motion blur

Порой очень хочется использовать графические эффекты, вроде размытия движения, которого вроде бы нету в CSS3 фильтрах. Можно это дело сымитировать используя тени и анимацию движения. Например вот так: See the Pen Motion Blur by Artem Demo (@artemdemo) on CodePen.

Как включить display: block и none в анимацию

Я думаю, что все уже успели попробовать css3 анимацию. Если нет, то закройте этот пост и идите пробуйте. Очень удобно, симпатично (дизайнеры радуются, вам плюсы в карму и в зарплату) и главное просто в применении. Наверное, все мы начали использовать анимацию по старой привычке, привитой ещё jQuery, со свойства dispay: none. Однако, быстро поняли, что

Всплывающее окно с плавной анимацией в ангулар – AngularJs morph animation

Использование анимации может быть достаточно запутанным процессом просто потому что требуется учитывать достаточно большое количество факторов. Вторая сложность, с которой приходится сталкиваться – это отладка анимации, когда глюк виден, но он длиться только долю секунду и отловить его, чтобы посмотреть что повлияло на его появления достаточно проблематично. Однако, разве сложности могут нас остановить? :] Сегодня

Анимация в ангулар – AngularJS Animation

За анимация в AngularJS отвечает отдельный модуль, который так и называется – ngAnimate. Этот модуль поддерживает как использование css анимации, так и создание своей анимации средствами JavaScript. В этой статье я расскажу об инструментах ангулара для css3 анимации. Для того что бы начать использовать анимацию достаточно просто включить этот модуль в проект и использовать встроенные

Анимация в css3 – css3 animation пример

В этом примере я расскажу о том как использовать анимацию в css3 Полный код примера можно найти здесь.

Анимированное меню – css3 transition пример

В этом видео я показываю пример использования css3 transition. Полный код примера можно найти здесь.

Разница между css transition и css animation

Давайте сегодня поговорим об анимации. Меня уже ни раз просили рассказать о том как работать с ней и в том числе, как применять ее в ангуларе. Однако, для того что бы перейти к “разбору полетов” с фреймворком нужно разобраться с основами. Итак ни для кого уже не является неожиданностью, что css3 поддерживает анимацию. Огромное количество