Spin FontAwesome Icon при наведении курсора на Angular - PullRequest
Новая
       5

Spin FontAwesome Icon при наведении курсора на Angular

0 голосов
/ 14 февраля 2020

Я знаю, что есть много примеров, как крутить значок с CSS и прочим, но почему-то я не могу добиться того, чего хочу. 

<button id="button" mat-button type="button" class="fa-spin-hover" (click)="doSomething()">
  <fa-icon [icon]="['fas', 'sync']" [spin]="false" size="lg" class="rotate">
  </fa-icon>
</button>

Я не знаю, какая здесь лучшая практика , Конечно, я мог бы создать логическое значение и сделать что-то вроде [spin]="bool", но я не думаю, что это правильный путь. Если я использую class="fa-spin-hover" на кнопке, вся кнопка вращается, но она работает. Если я использую его на <fa-icon>, он не работает. 

.fa-spin-hover:hover {
  -webkit-animation: fa-spin 2s 1 linear;
  -moz-animation: fa-spin 2s 1 linear;
  -o-animation: fa-spin 2s 1 linear;
  animation: fa-spin 2s 1 linear;
}

Я попробовал несколько вещей. Именно поэтому атрибут class="rotate" включен <fa-icon>. Я пытался вращаться только на 180 градусов: 

.rotate:hover {
  animation: rotate 1s ease-in-out 0s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

Но эти классы бесполезны на <fa-icon>. Также пробовал такие вещи, как ::ng-deep

Создал StackBlitz: https://stackblitz.com/edit/angular-font-awesome-starter-msp1vu

...