Занятие на вечер: эффект 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]

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