隐藏/显示纯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;
}

为什么这个简单的动画不起作用？有角度，你被迫使用它的动画策略吗？ https://angular.io/guide/animations

提前致谢

Answer 1

是的，您可以使用普通的CSS动画。我的工作正常。问题似乎是你的班级名称show在css和shown组件html中的拼写错误。更新你的html如：

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