angular-animations icon indicating copy to clipboard operation
angular-animations copied to clipboard

Published 20 hours ago • verified publisher icon filipows

Performance issues with collapse

Open dalepo opened this issue 6 years ago • 3 comments

Collapse/Expand have performance issues on mobile devices. This is due to height recalculation on the DOM, there is a good article talking about this.

dalepo avatar Feb 18 '19 15:02 dalepo

I think this can be solved easily by using scaleY(0) -> scaleY(1) instead of height.

GoGoris avatar Mar 25 '19 14:03 GoGoris

Having the same issue here. The performance is very bad for the collapse and expand function. @filipows

tuanle07 avatar Sep 14 '20 14:09 tuanle07

The problem is caused by the fact that animation changes the offsetHeight of the element which causes an amount of layout recalculation and repainting. I'm not sure how to achieve better performance using @angular/animations though. Do you have any ideas? I've check how mat-expansion-panel in @angular/material has been implemented. It looks like it's relaying on height property animation as well, and having the same issue.

filipows avatar Sep 18 '20 14:09 filipows