Question

我有以下按钮

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

它显示一个播放图标。

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

我在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>

Answer 2

您可以在组件中添加一个标志，如下所示：

2 #this corresponds to no. of frames in first B 
2 #this corresponds to no. of frames in second B 
4 #this corresponds to no. of frames in third B

css：

@Component({
  ...
  template: `
    <button class="btn btn-primary btn-sm"
      [ngClass]="{'clicked': isClicked}" type="button"
      (click)="executeUsecase(usecase.UsecaseId)">>
      <i class="fa fa-play"></i>
    </button>
  `
})
export class Component {
  ...
  isClicked: false;

  executeUsecase(id) {
    ...
    this.isClicked = true;
  }
}

角按钮单击旋转图标

2 个答案: