filipows/angular-animations

Performance issues with collapse

Opened this issue · 3 comments

dalepo commented

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.

GoGoris commented

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

tuanle07 commented

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

filipows commented

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.