Как мы добавляем элементы с помощью jQuery?
Наиболее популярный с помощью
.html(), еще можно добавлять с помощью
.prepend(),
.append(),
.after(),
.before(), и прочее.
Когда мы добавляем таким способом элементы, они моментально отображаются. У нас есть возможность оживить добавление путем костыльного:
$el.hide();
$target.append($el);
$el.slideDown(); // .fadeIn();
Но этот способ проблемный.
Во-первых, нужно писать 3 строки вместо одной, мы не можем это провернуть с кусочком дом-дерева в виде строки - для начала из нее нужно создать $-объект, а потом только скрыть.
Во-вторых, анимация лагает при больших данных, и нам нужна css-анимация с аппаратным ускорением на мобильных девайсах.
В-третьих, мы ограничены двумя функциями анимации.
Более того, решение должно
учитывать проблему анимации высоты блока.
Решение должно позволять выбирать анимации из списка (более двух-трех) и придумывать кастомные анимации.
Итого, нам нужно решение, работающее на
.requestAnimationFrameRate(), позволяющее сначала помещать элемент, потом оборачивающее его в обертку (для анимации высоты), к тому же нужно писать css-стили.
Есть ли подобный плагин?
P.S.: Пока писал вопрос, прорабатывал различные решения, и знаю как его написать, чтобы работало как надо, включая css, и разные фишки для производительного рендеринга анимации. Но! Зачем писать велосипед?
P.P.S.: Если такого плагина нет, а множество людей заинтересуется - напишу и выложу в открытый доступ.
