Как ускорить CSS-анимацию спойлера?

Question

[tamtakoe]

Как ускорить анимацию спойлера? plnkr.co/edit/XbUKuX?p=preview

А то в сложном дизайне и на слабых машинах тормозит.

Можно ли как-то через transform3D сделать?

Comments

[tamtakoe]

Есть примеры, в которых подружили Ангуляр и scripty2.com

Answer 1

[Сергей Протько]

как-то у вас сложно... ngAnimate для такой задачи как-то вроде и не нужен особо.
plnkr.co/edit/YCPeFHT2YD0iMrUVhSFZ?p=preview

Во всяком случае таймлайн хрома в отличии от вашего варианта теперь показывает значения не ниже ~60fps. Хотя нужно пробовать еще.

А по поводу ускорения... ну, так как у вас меняется высота блока, будет перерисовываться вся страница, так что сильно это не поможет. Только если для всего блока родителя поставить 3D трансормацию нулевую.

Comments

[tamtakoe]

Думается, ngAnimate нужен для того, чтобы не изобретать аналоги для ng-if, ng-show и т.п., не загрязнять код и сделать его железобетонным. Поменял пример так, чтобы проиллюстрировать универсальную анимацию (plnkr.co/edit/XbUKuX?p=preview). С transform3D (0,0,0) что-то не выходит. Не вижу увеличения производительности. Может быть не так применяю?