Carduelis
@Carduelis
Web-developer, front-end, js, less

Есть ли плагин для jquery для анимированного появления добавленных блоков?

Как мы добавляем элементы с помощью jQuery?
Наиболее популярный с помощью .html(), еще можно добавлять с помощью .prepend(), .append(), .after(), .before(), и прочее.
Когда мы добавляем таким способом элементы, они моментально отображаются. У нас есть возможность оживить добавление путем костыльного:
$el.hide();
$target.append($el);
$el.slideDown(); // .fadeIn();

Но этот способ проблемный.
Во-первых, нужно писать 3 строки вместо одной, мы не можем это провернуть с кусочком дом-дерева в виде строки - для начала из нее нужно создать $-объект, а потом только скрыть.
Во-вторых, анимация лагает при больших данных, и нам нужна css-анимация с аппаратным ускорением на мобильных девайсах.
В-третьих, мы ограничены двумя функциями анимации.

Более того, решение должно учитывать проблему анимации высоты блока.
Решение должно позволять выбирать анимации из списка (более двух-трех) и придумывать кастомные анимации.
Итого, нам нужно решение, работающее на .requestAnimationFrameRate(), позволяющее сначала помещать элемент, потом оборачивающее его в обертку (для анимации высоты), к тому же нужно писать css-стили.

Есть ли подобный плагин?
P.S.: Пока писал вопрос, прорабатывал различные решения, и знаю как его написать, чтобы работало как надо, включая css, и разные фишки для производительного рендеринга анимации. Но! Зачем писать велосипед?
P.P.S.: Если такого плагина нет, а множество людей заинтересуется - напишу и выложу в открытый доступ.
  • Вопрос задан
  • 491 просмотр
Пригласить эксперта
Ответы на вопрос 1
copist
@copist
Мидл, хочешь стать синьором? http://copi.st/ExhE
Мне кажется речь идёт об отображении карточек в стиле Pinterest Layout или Massonry
Анимацию можно реализовать через CSS, почти без JS.

Посмотри вот эти подборки

Варианты анимации
tympanus.net/codrops/2013/07/02/loading-effects-fo... и пример tympanus.net/Development/GridLoadingEffects/index2.html

Вопрос "Как отключить анимацию" stackoverflow.com/questions/19326268/jquery-masonr...

Статья про скорость анимации www.html5rocks.com/en/tutorials/speed/high-perform...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы