Слайд вниз с помощью css (аппаратное ускорение)

Question

У меня есть «стек» дочерних divs внутри контейнера div контейнера. Эти дочерние divs, похоже, скользят вниз, потому что новые дети постоянно присоединяются к вершине и получают анимацию .slideDown(), тем самым также заставляя всех остальных детей. Это отлично работает, но я использую его в приложении PhoneGap, и когда он выполняется быстро, он выглядит неспокойным и нервным. Я слышал, что это можно было бы сделать лучше, сделав css-преобразования, что заставляет аппаратное ускорение (я думаю). Тем не менее, каждый пример, который я вижу, кажется, пытается сделать гораздо более сложные вещи, чем мне нужно, и я не могу это понять, поэтому, если это возможно, любая помощь будет оценена по достоинству.

JQuery Код:

row.hide().prependTo('#blockArea').slideDown(1000, 'linear'); 

blockArea является оболочкой, строка строка добавляется.

Answer 1

Это будет не так легко ...

Если вы действительно хотите, чтобы получить лучшие результаты, используя аппаратное ускорение, вы не можете полагаться на высоту переходов.

Что вы должны сделать? Есть несколько возможностей, но я бы порекомендовал:

Добавить div как есть, без переходов. В то же время, установить преобразование на обертке в стиле

transform: translateY(***px); 

это преобразование должно быть рассчитано, чтобы компенсировать новый DIV, так что все, что движется (новый DIV будет оказываться над текущими, и вероятно, из окна просмотра).

also, set a transition on transform of the time that you want. 

Теперь, в отложенной функции, измените преобразование на translateY (0px). Это будет нормально делать в setTimeout() в 0 миллисекунд. Вам нужно сделать это таким образом, чтобы был применен переход

Удачи!