角按钮单击旋转图标

Question

我有以下按钮

  <button class="btn btn-primary btn-sm" type="button" (click)="executeUsecase(usecase.UsecaseId)"><i class="fa fa-play "></i></button>                                             

它显示一个播放图标。

单击此按钮时，我希望此播放图标旋转。我该如何实现？

我在Angular 4中使用打字稿

Answer 1

您只能为此使用CSS，不需要Angular：

button:focus i {
  animation: rotate 1s ease-in-out 0s;
}

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button>