Занятие на вечер: эффект Explode на pure JS

[@andreymal]

В 2017 году и без CSS3 transition+transform? Это ж фи, на мобильниках тормозит.

[@MrCheater]

Хочу дать несколько советов:

• Не учите людей анимации через setTimeout делать, есть же requestAnimationFrame
• Используйте для статей на Хабре тег <oembed>, чтобы все могли смотреть ваши демки, не отходя от кассы

Пример использования OEMBED

<oembed>http://codepen.io/MrCheater/pen/QGqdbo</oembed>

[@wwwamn]

Кодировка, Карл, кодировка… В демо пропиши в или отправь заголовком.

[@avdept]

А кто будет чистить DOM после окончания анимации?

[@DiphenylOxalate]

Так ведь потом можно «собрать» элемент обратно, если надо.
В jquery explode такая возможность есть.

[@vitvad]

<oftop>кто такая Анна и за что мы ее так?</oftop>

[@CyberAP]

АннаСофия Робб

[@deepblack]

Аннасофи́я Робб (англ. AnnaSophia Robb, род. 8 декабря 1993, Денвер) — американская актриса. Wiki

[@askd]

Pure CSS на коленке http://codepen.io/askd/full/ZLVqOP/

[@bano-notit]

Ну не pure конечно, а PostCSS, но всё же работает)

[@askd]

PostCSS только потому, что было лень писать 64 строки правил вручную. На выходе (в браузере) это всё же обычный CSS ;)

[@bano-notit]

Ну… Когда на ангуляре 2 пишешь тоже в конце концов обычный js получается, так же как и со многими вещами.

[@KostaShah]

Не уверен, что это возможно, но возникла вот такая идейка. Что если, после того, как мы всё размножили и расположили, то есть, сделали всё, кроме самой анимации, вместо того, чтобы скриптом двигать каждую ячейку, задать этим ячейкам и их контейнеру стили равномерного распределения с помощью flex-модели, указать контейнеру tranzition на положение и размер, а затем задать ему новое положение (выше и левее) и новые размеры (больше). Тогда, плавно расширяющийся контейнер сам плавно раздвинет ячейки в нужные стороны.

[@andreymal]

Наверно, это возможно, но всё равно в сравнении с transform(translateX/Y) будет притормаживать

[@askd]

Выше как раз такой пример в CodePen ;)

[@KostaShah]

Да, верно, я заметил, и оценил :-) Отлично сделано, я примерно так и предполагал. Когда я писал, его не было (моё сообщение ждало модерации несколько дней).

[@askd]

Модерация?! Ничего себе. Моё сразу опубликовалось (хотя у меня и плохая карма после Великого Обнуления)