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

是否可以在angular中使用普通CSS动画

我只是想用一个简单的动画来显示一个div（div是hide，然后出现）

此组件的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时，您是否被迫使用其动画策略？

---

提前感谢

是的，您可以使用普通CSS动画。在我这一方效果很好。问题似乎是css中的类名

show

和组件html中的

show

有误。 更新您的html，如：

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

---

是的，这是一个很好的方法。不依赖可能更改或弃用的角度动画。

.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;
}

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