1
ERROR DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.
at DatagridRowExpandAnimation.push../node_modules/@clr/angular/esm5/clr-angular.js.DatagridRowExpandAnimation.run

<clr-dg-row *ngFor="let row of rows">
        <clr-dg-cell>...</clr-dg-cell>
        <ng-container ngProjectAs="clr-dg-row-detail" *ngIf="row.info">
            <clr-dg-row-detail *clrIfExpanded="row.expand" >...</clr-dg-row-detail>
        </ng-container>
    </clr-dg-row>

Have a set of rows with predefined values 'row.expand'(true or false) to expand rows automatically on initial render. Getting above error while auto-expanding rows in clarity Datagrid.

To be more specific the error occure in following line, due to oldHeight is 'NaN' and this will be 'NaNpx' which is invalid value for animation.

DatagridRowExpandAnimation.prototype.run = {
    ...
    this.running = this.el.nativeElement.animate({ height: [this.oldHeight + 'px', newHeight + 'px'], overflowY: ['hidden', 'hidden'], easing: 'ease-in-out' }, { duration: 200 });
    ...
    }
V_R
  • 96
  • 9
  • Does your module also include the BrowserAnimationsModule? – Jeremy Wilken Nov 30 '18 at 14:31
  • Hi Jeremy, yes I have added BrowserAnimationsModule in my root module. and I think the error is because datagrid is not rendered yet and trying to find the height of existing row(from error line), if I expand it manually its working fine. – V_R Dec 01 '18 at 10:11

0 Answers0