旋转角度-V形-单击 [英] Rotate Angular - chevron - on click

问题描述

我试图在每次单击时将Chevron-left向Chevron-right旋转，但在Angular中带有动画.

I am trying to rotate the chevron-left to chevron-right whenever they are clicked but with animation in Angular .

CSS:

.rotate-chevron {
    transition: .1s linear;
  }

HTML:

<button   [class.button-open]="!slideOpen"
          [class.button-close]="slideOpen"
          (click)="changeSlide()">
    <i class="rotate">{{slideOpen ? 'chevron_left' : 'chevron_right'}}</i>
  </button>

TS:

changeSlide(): void {
    this.slideOpen = !this.slideOpen;
  }

以下是示例 codepen

推荐答案

以下是有效的链接

.TS

@Component({
  selector: 'my-app',
  template: `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<button   [class.button-open]="!slideOpen"
          [class.button-close]="slideOpen"
          (click)="changeSlide()">
    <i class="fa fa-chevron-right" [class.clicked]="slideOpen"></i>
  </button>`
})
class AppComponent {  
    slideOpen: any = false;

  title="hello world angular 6";
  constructor() {
    // TODO: Define your Angular component implementation
  }
    changeSlide(): void {
    this.slideOpen = !this.slideOpen;
  }
}

CSS

.fa {
    transition: all .5s linear;
}
.clicked {
    transform:rotate(180deg);
}

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