docs(material/table): use CSS transition for animation (#30454)

Uses a CSS transition for the expandable rows example, instead of relying on the animations module. This will allow us to remove the animations module from the docs site.

Author: crisbeto

src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.css

@@ -6,6 +6,10 @@ tr.example-detail-row {
   height: 0;
 }
 
+tr.example-element-row {
+  cursor: pointer;
+}
+
 tr.example-element-row:not(.example-expanded-row):hover {
   background: whitesmoke;
 }
@@ -18,9 +22,21 @@ tr.example-element-row:not(.example-expanded-row):active {
   border-bottom-width: 0;
 }
 
-.example-element-detail {
+.example-element-detail-wrapper {
   overflow: hidden;
+  display: grid;
+  grid-template-rows: 0fr;
+  grid-template-columns: 100%;
+  transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.example-element-detail-wrapper-expanded {
+  grid-template-rows: 1fr;
+}
+
+.example-element-detail {
   display: flex;
+  min-height: 0;
 }
 
 .example-element-diagram {
@@ -45,3 +61,11 @@ tr.example-element-row:not(.example-expanded-row):active {
 .example-element-description-attribution {
   opacity: 0.5;
 }
+
+.example-toggle-button {
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.example-toggle-button-expanded {
+  transform: rotate(180deg);
+}

src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.html

@@ -3,37 +3,40 @@
        class="mat-elevation-z8">
   @for (column of columnsToDisplay; track column) {
     <ng-container matColumnDef="{{column}}">
-      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
-      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
+      <th mat-header-cell *matHeaderCellDef>{{column}}</th>
+      <td mat-cell *matCellDef="let element">{{element[column]}}</td>
     </ng-container>
   }
   <ng-container matColumnDef="expand">
     <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
     <td mat-cell *matCellDef="let element">
-      <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
-        @if (expandedElement === element) {
-          <mat-icon>keyboard_arrow_up</mat-icon>
-        } @else {
-          <mat-icon>keyboard_arrow_down</mat-icon>
-        }
+      <button
+        mat-icon-button
+        aria-label="expand row"
+        (click)="toggle(element); $event.stopPropagation()"
+        class="example-toggle-button"
+        [class.example-toggle-button-expanded]="isExpanded(element)">
+        <mat-icon>keyboard_arrow_down</mat-icon>
       </button>
     </td>
   </ng-container>
 
   <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
   <ng-container matColumnDef="expandedDetail">
     <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
-      <div class="example-element-detail"
-           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
-        <div class="example-element-diagram">
-          <div class="example-element-position"> {{element.position}} </div>
-          <div class="example-element-symbol"> {{element.symbol}} </div>
-          <div class="example-element-name"> {{element.name}} </div>
-          <div class="example-element-weight"> {{element.weight}} </div>
-        </div>
-        <div class="example-element-description">
-          {{element.description}}
-          <span class="example-element-description-attribution"> -- Wikipedia </span>
+      <div class="example-element-detail-wrapper"
+        [class.example-element-detail-wrapper-expanded]="isExpanded(element)">
+        <div class="example-element-detail">
+          <div class="example-element-diagram">
+            <div class="example-element-position">{{element.position}}</div>
+            <div class="example-element-symbol">{{element.symbol}}</div>
+            <div class="example-element-name">{{element.name}}</div>
+            <div class="example-element-weight">{{element.weight}}</div>
+          </div>
+          <div class="example-element-description">
+            {{element.description}}
+            <span class="example-element-description-attribution"> -- Wikipedia </span>
+          </div>
         </div>
       </div>
     </td>
@@ -42,8 +45,8 @@
   <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
   <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
       class="example-element-row"
-      [class.example-expanded-row]="expandedElement === element"
-      (click)="expandedElement = expandedElement === element ? null : element">
+      [class.example-expanded-row]="isExpanded(element)"
+      (click)="toggle(element)">
   </tr>
   <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
 </table>

src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts

@@ -1,5 +1,4 @@
 import {Component} from '@angular/core';
-import {animate, state, style, transition, trigger} from '@angular/animations';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatTableModule} from '@angular/material/table';
@@ -11,20 +10,23 @@ import {MatTableModule} from '@angular/material/table';
   selector: 'table-expandable-rows-example',
   styleUrl: 'table-expandable-rows-example.css',
   templateUrl: 'table-expandable-rows-example.html',
-  animations: [
-    trigger('detailExpand', [
-      state('collapsed,void', style({height: '0px', minHeight: '0'})),
-      state('expanded', style({height: '*'})),
-      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
-    ]),
-  ],
   imports: [MatTableModule, MatButtonModule, MatIconModule],
 })
 export class TableExpandableRowsExample {
   dataSource = ELEMENT_DATA;
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
   columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand'];
   expandedElement: PeriodicElement | null;
+
+  /** Checks whether an element is expanded. */
+  isExpanded(element: PeriodicElement) {
+    return this.expandedElement === element;
+  }
+
+  /** Toggles the expanded state of an element. */
+  toggle(element: PeriodicElement) {
+    this.expandedElement = this.isExpanded(element) ? null : element;
+  }
 }
 
 export interface PeriodicElement {