DiphenylOxalate Feb 10 2017 at 13:07

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

4 min

JavaScript*

From sandbox

Comments 17

andreymal Feb 10 2017 at 13:25

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

MrCheater Feb 10 2017 at 13:27

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

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

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

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

wwwamn Feb 10 2017 at 17:22

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

avdept Feb 10 2017 at 17:44

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

DiphenylOxalate Feb 13 2017 at 22:52

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

vitvad Feb 10 2017 at 21:14

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

CyberAP Feb 13 2017 at 11:19

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

deepblack Feb 13 2017 at 22:51

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

askd Feb 13 2017 at 17:17

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

bano-notit Feb 14 2017 at 22:01

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

askd Feb 15 2017 at 09:59

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

bano-notit Feb 17 2017 at 22:17

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

KostaShah Feb 13 2017 at 22:53

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

andreymal Feb 13 2017 at 22:55

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

askd Feb 15 2017 at 10:01

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

KostaShah Feb 15 2017 at 10:42

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

askd Feb 15 2017 at 11:08

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