Триггер CSS класс (анимация) по клику в приложении Angular

Question

Я работаю с приложением Ioni c - Angular, к которому прикреплены некоторые кнопки с анимацией CSS. В настоящее время код выглядит так, как показано ниже, и все работает отлично:

Текущий HTML / CSS

<div class="l-button">
    <a href="#" class="m-button -primary"></a>
</div>

.m-button:active,
.m-button:hover {
  text-decoration: none;
}
.m-button:active {
  box-shadow: 0 0.0625rem 0 0 #ccc;
  transform: scale(0.975);
}
.m-button.-primary {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background-color: #eb5505;
  color: #fff;
  box-shadow: 0 0.3125rem 0 0 #c93e00;
}
 .m-button.-primary:active {
   text-decoration: none;
   box-shadow: 0 0.125rem 0 0 #ccc;
   transform: scale(0.975);
 }

Но по какой-то причине (мерцание экрана на iOS при скольжении во время наведения мышки на кнопке), я хочу удалить анимацию из :active стилей и заставить ее запускаться по щелчку, так как это выглядит как причина проблемы. Я создал новый класс CSS и попытался сделать это, используя приведенный ниже код, но анимация больше не работает. Что не так, и, может быть, есть какое-то лучшее решение, чтобы сделать это возможным?

Новый HTML / CSS

<div class="l-button">
    <a href="#" (click)="clickEvent()" [ngClass]="btnStatus ? '-run-animation' : ''" class="m-button"></a>
</div>

.-run-animation {
  text-decoration: none;
  box-shadow: 0 0.125rem 0 0 #ccc;
  transform: scale(0.975);
}

TS

btnStatus: boolean = false;
clickEvent() {
  this.btnStatus = !this.btnStatus;
}

Большое спасибо в заранее!