html - CSS3 过渡只工作一次

Question

我需要为刷新图标设置动画以在单击它时对其进行旋转。我找到了一种通过 CSS 实现的方法。

css 文件

.refresh:focus .mat-icon {
  animation: rotate 2s ease-in-out;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.html 文件

              <button mat-icon-button class="refresh" color="primary" (click)="refreshTableFkeys()">
                <mat-icon aria-label="Example icon-button with a heart icon">refresh</mat-icon>
              </button>
              <button mat-icon-button color="primary" (click)="addNewFkey()">
                <mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
              </button>

当我单击按钮时，图标会旋转一次。当我再次单击它以再次刷新时，动画停止工作。如何在每次点击时触发动画？

提前致谢。

编辑：打字稿

  refreshTableFkeys() {
    this.dataSource_Fkeys.paginator._changePageSize(this.dataSource_Fkeys.paginator.pageSize);
  }

标签： htmlcsstypescriptangular5