Question

我试图在每次单击时将Chevron-left旋转到Chevron-right，但在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

Answer 1

由于您使用的是来自CDN的图标，因此不能简单地对其进行动画处理。您所能做的就是仅使用一个svg并使用css transform旋转它。示例：

html：

<button   [class.button-open]="!slideOpen"
          [class.button-close]="slideOpen"
          (click)="changeSlide()">
    <i class="rotate" [ngStyle]="getChevronStyle()>;"> chevron_left </i>
  </button>

js：

getChevronStyle(){
    if(this.slideOpen) {
        return { 'transform': 'rotate(0deg)' }
    } else {
        return { 'transform': 'rotate(180deg)' }
    }
}

css：

.rotate {
    transition: all .1s linear;
  }

您可以在此处检查CSS转换兼容性：https://caniuse.com/#search=transform 您也可以在此处查看有关ngStyle的更多信息：https://angular.io/api/common/NgStyle 希望对您有帮助！

Answer 2

这是工作中的link

.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形-单击

2 个答案: