角按钮单击旋转图标 [英] Angular Button click rotate icon

问题描述

我有以下按钮

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

它显示了一个播放图标.

我希望这个播放图标在我点击它时旋转.我怎样才能实现它?

我在 angular 4 中使用打字稿

解决方案

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

button:focus i {动画:旋转 1 秒缓入缓出 0 秒；}@关键帧旋转{从{变换:旋转(0度)；}{ 变换:旋转(360度)；}}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="样式表"/><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>

I have the following button

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

it shows a play icon.

I want this play icon to spin when I click on this. How can i achieve it?

I am using typescript in angular 4

解决方案

You can use CSS only for that, no Angular required :

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>

这篇关于角按钮单击旋转图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！