Expandable table's animation is lagging

[woteska]

What is the expected behavior?

Animation works well without any lagging when I open the (expandable) table's row.

What is the current behavior?

When I try to open the row clicking on it, it is not animating, but it is lagging.
(When I close the row clicking on it again, animation works very well.)

What are the steps to reproduce?

https://stackblitz.com/edit/angular-sbj26m

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/material": "7.3.4",
"@angular/cdk": "7.3.4",
"@angular/core": "7.2.9",

• Chrome, Opera, Firefox latest
• Edge, Internet Explorer latest (I cannot open the expandable row at all.)

[zermelozf]

I am seeing the same behaviour (animation is not smooth) even on the angular demo page: https://material.angular.io/components/table/examples. Closing the expanded row is smooth though.

[garyc2232]

I have the same issue on Expansion Panel but my case is on Ionic 4 framework. I tested on the local web browser and it is ok and very smooth. However i try to run on real android device, it is very lag. Hope there will be a solution for this issue

[acorbellini]

Removing "display: none" from the "collapsed" animation state in the Component seems to fix the problem.

[ccjmne]

I too could fix this phenomenon the way @acorbellini described.

[anisabboud]

I encountered the same issue.

Compare "Table with expandable rows" example in https://material.angular.io/components/table/examples (expanding rows is smooth), with its own official Stackblitz which uses updated dependencies https://stackblitz.com/angular/drlaxdpogep?file=app%2Ftable-expandable-rows-example.ts (expanding rows is not smooth).

@acorbellini's workaround worked for me, thanks!

[lbalint]

@acorbellini and @anisabboud Tried your solution, but then whole table gets crappy after 1 expansion :/
Any other idea?

[literallyjustroy]

While display:none allows the animation to smoothly transition, it also causes the page to lag significantly when more and more rows are displayed. Any other solutions?

[joshuaRuff]

Have been running into this issue as well. I followed https://material.angular.io/components/table/examples exactly and it fixed it.

I was using '<mat-table>', '<mat-cell>' etc instead of using <'table mat-table>' '<td mat-cell>' switching that fixed the issue. Also notice the example code on the material angular website removed the display: 0 from the collapse state.