s css анимация работает один раз

Question

Я пытаюсь создать боковое меню, которое сдвигается влево и вправо, когда вы нажимаете на него, но это происходит только один раз с анимацией, меню перемещается влево и вправо, но без анимации

html код

<div class="arrow" (click)="gaucheDroite()"
    [ngClass] = "{
            'classgauche' : gauche == 1,
            'classdroite' : gauche == 2
        }">
    <i class="fas fa-arrow-right"></i>
</div>
<div class="mere" 
[ngClass] = "{
    'classgauche' : gauche == 1,
    'classdroite' : gauche == 2
}">


</div>

с css код анимации меню

.classgauche{
    animation: translatex 1000ms ease-in-out 100ms both;
}
.classdroite{
    animation: translatex 1000ms ease-in-out 100ms reverse both;
}
@keyframes translatex{
    0% {
        transform: translateX(-300px);
    }
    100% {
        transform: translateX(0);
    }
}
.arrow{
    height: 50px;
    width: 50px;
    background-color: #fdfdfd;
    z-index: 11;
    border-radius: 0 2px 2px 0;
    display: inline-block;
    box-shadow: 2px 0.5px 3px #b4b4b4;
    //transform: translateX(-300px);
}

Angular код при нажатии метода

  gaucheDroite(){
    //this.gauche = ! this.gauche;
    if(this.gauche == 0 || this.gauche == 1){
      this.gauche =2;
      setTimeout(function() {
          this.gauche =0;
      }, 100);
    }
    else if(this.gauche == 2){
      this.gauche = 1;
      setTimeout(function() {
          this.gauche =0;
      }, 100);
    }
  }

}

Answer 1

Лучшее для этого - использовать Angular анимации. Вот вам пример того, как это сделать https://stackblitz.com/edit/angular-8zy3pi?file=src%2Fapp%2Fcomponents%2Fleft-menu%2Fleft-menu.component.ts