角度按钮单击旋转图标

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

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

@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;
}
}

.css：

.btn {
transition: all 2s ease-out !important;
}
.clicked {
transform: rotate(20deg)
}