Angular 无法在角度视图中执行CSS动画

我尝试使用一个普通的css动画，如下所示：

div {
  height: 0.5rem;
  width: 1rem;
  background-color: blue;
  transform-origin: left;
  transition: transform 5s;
  transition-delay: 2s;
  transform: scaleX(15);
}

它根本不起作用。div显示在scaleX（15）上，但没有持续时间

---

它确实可以与CodePen一起正常工作，但不能与Stackblitz一起正常工作。我错过了什么？CSS动画不能与Angular一起工作吗？

您的div需要有一个初始状态，而不需要转换。变换：变换仅在变换值更改时工作。如果已从一开始设置，则不会出现动画。我举了一个例子，点击div会触发动画，灵感来自您的CSS片段

---

Angular包含css动画

从“@angular/platform browser/animations”导入{BrowserAnimationsModule}

---

在Angular中，默认情况下，所有CSS样式都封装到组件中，CSS动画在Angular中工作，框架不会（也不能）停止浏览器的DOM渲染。只要CSS规则正确地选择了一个元素，并且应用的动画正确，它就会工作

看起来你需要做两件事

确保您的样式与要设置动画的

div

元素定义在同一组件中（或阅读有关非封装样式的角度文档）

CSS动画不起作用，需要为其提供初始状态，然后根据动作更改样式。一个简单的例子：

在组件中，您可以根据一些逻辑设置

动画

类，以确定何时需要触发动画

在模板中：

<div [class.animate]="componentLoaded"></div>

<div [class.animate]="componentLoaded"></div>

export class MyComponent {
  componentLoaded = false;

  ngOnInit() {
    this.componentLoaded = true; // Will trigger animation
  }
}