角度动画翻转卡片

Question

我使用角度6和材料设计。当我点击卡片中的图标时，我想实现翻转卡片效果。

我的HTML代码：

  <div fxLayout="column">
  <div fxLayout="row">
    <p class="page-heading" fxFlex="80%">Catalogue</p>
    <div class="page-content-filter" fxLayoutAlign="end">
      <button mat-button class="search-btn"><i class="material-icons"> search </i></button>
      <input class="form-filter" matInput (keyup)="applyFilter($event.target.value)" placeholder="Search...">
    </div>
  </div>
  <mat-grid-list cols="3" rowHeight="3:1">
    <mat-grid-tile *ngFor="let asset of assets" >
      <div class="full-width white">
        <div fxLayout="column" fxLayoutGap="20px">
          <div fxLayout="row" fxLayoutGap="15px">
            <img fxFlex="10" style="width:50px;height:50px;" src="../../../../assets/images/images.jpeg" mat-card-image>
            <b fxFlex="100">{{asset.name}}</b>
            <mat-icon fxFlex="100" fxLayoutAlign="end end" class="small-icon">spa</mat-icon>
          </div>
          <div fxLayout="row" fxLayoutGap="15px">
            <mat-icon class="small-icon">face</mat-icon>
            <p class="small-heading"> Mohit Harshan</p>
            <mat-divider vertical="true"></mat-divider>
            <mat-icon class="small-icon">face</mat-icon>
            <p class="small-heading">Video</p>
            <mat-divider vertical="true"></mat-divider>
            <mat-icon class="small-icon">face</mat-icon>
            <p class="small-heading">5 points</p>
          </div>
          <mat-progress-bar class="progress" mode="determinate" value="40"></mat-progress-bar>
        </div>
      </div>
    </mat-grid-tile>
  </mat-grid-list>
</div>

当我点击“spa”垫图标时，它应该翻转并显示背面数据。

Answer 1

有一个关于翻转动画的问题 - 检查以下内容：Angular Flip Animation