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动画。我的工作正常。问题似乎是CSS中您的类名show和HTML组件中的shown的错字。像这样更新您的html：

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

使用纯CSS隐藏/显示时的角度动画

1 个答案: