Угловая анимация при скрытии / показе с чистым CSS

Question

Можно ли использовать обычную CSS-анимацию под углом?

Я пытаюсь просто показать div с простой анимацией (div скрывается, затем появляется)

<div class="burguer-icon" (click)="onClick()">
  <i class="fas fa-bars"></i>
</div>

<div 
  [ngClass]="showMenu ? 'shown' : 'hide'"
  class="menu-content"
>
  <div class="cross-icon" (click)="onClose()">
    <i class="fas fa-times"></i>
  </div>

  // content
</div>

и я переключаю состояние, если щелкнул или нет, в моем component.ts

onClick() {
    this.showMenu = !this.showMenu;
  }

  onClose() {
    this.showMenu = !this.showMenu;
  }

Мой CSS-файл для этого компонента выглядит следующим образом:

.burguer-icon {
  background-color: orange;
}

.menu-content {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 100vh;
  background-color: green;
  transition: all 3s ease;
}

.show {
  left: 0px;
}

.hide {
  left: 90vw;
}

Почему эта простая анимация не работает? С angular вы вынуждены использовать его стратегию анимации? https://angular.io/guide/animations

Заранее спасибо

Answer 1

Да, вы можете использовать обычные CSS-анимации. Это хорошо работает на моем конце. Проблема, кажется, опечатка в имени вашего класса show в CSS и shown в компоненте HTML. Обновите ваш HTML как:

[ngClass]="showMenu ? 'show' : 'hide'"