Question

我正在尝试对可见度更改使用动画，但是它无法正常工作。
在this answer之后，我添加了一个动画，用于更改席子表的行的可见性。这是我的桌子：

<ng-container>
    <mat-card class="mat-card py-0">
        <mat-card-header class="label">
          <ng-container>
            <mat-card-title>{{titoloTabella}}</mat-card-title> 
            <button mat-button class="align-right" (click)="changeClass()">
              <mat-icon [ngClass]="(rotate)?'rotate':'no-rotate'">keyboard_arrow_down</mat-icon>
              </button>
          </ng-container>
          </mat-card-header>
  <table mat-table  matSort [dataSource]="dataSource" matTableExporter #exporter="matTableExporter">
    <ng-container *ngFor="let header of tableConfiguration.tableHeaders; let i = index" matColumnDef="{{ header.headerId }}"> 
      <th mat-header-cell mat-sort-header *matHeaderCellDef>{{ header.headerName }}</th>

      <td mat-cell *matCellDef="let row" > {{ row[header.headerId] }} </td> 

      <ng-container *ngIf="i == 0 && header.isJoinable == 'no'">
          <td mat-footer-cell *matFooterCellDef>TOTALE</td>
      </ng-container>
      <ng-container *ngIf="i > 0">    
          <td mat-footer-cell *matFooterCellDef>{{ tableFooter[header.headerId] }}</td>
    </ng-container>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="(collapsed)? 'collapsed-rows': 'no-collapsed-rows' " [@visibilityChanged]="visibilityState"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
  </table>
</mat-card>
</ng-container>

单击包含图标的按钮时，我通过更改行的类来更改行的可见性。 CSS类是：

.collapsed-rows {
    visibility: collapse; 
 }

.no-collapsed-rows{
   visibility: visible;
  }

然后在我的.ts文件中：

@Component({
  selector: 'app-report-table',
  templateUrl: './report-table.component.html',
  animations: [
    trigger('visibilityChanged', [
      state('visible', style({ opacity: 1 })),
      state('collapse', style({ opacity: 0 })),
      transition('visible => collapse', animate('600ms')),
      transition('collapse => visible', animate('300ms')),
    ])
  ],
  styleUrls: ['./report-table.component.scss']
})
[...]
 changeClass(){
    this.rotate = !this.rotate;
    this.collapsed = !this.collapsed;
    if (this.visibilityState === 'collapse')
          this.visibilityState = 'visible';
        else
          this.visibilityState = 'collapse';
      }

这些行在出现时会正确消失（因此，当可见性恢复可见时），但是当它们的可见性变回“折叠”时，它们会立即消失而不会褪色。我想念什么？

无法通过更改可见性使CSS动画正常工作

0 个答案: