Angular CSS3 动画关键帧

Question

在一个 angular 项目中，我们使用以下 CSS 属性（在 scss 样式表中）为元素设置动画：

@keyframes animationName {
  0% {
    y: 10
  }
  100% {
    y: 500;
  }
}

.svgRectangle {
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: animationFirst;
  animation-duration: 0.8s;
}

问题：虽然这些动画在开发服务器 (ng serve) 中运行良好，但在构建项目的生产版本时它们不起作用。查看页面的源代码，关键帧不再存在（css 属性存在）。

经过一段时间的挖掘和尝试后，事实证明，禁用 aot 和 buildOptimizer（默认为 true）将创建一个带有动画的产品构建。

我现在的问题是：这是否正常且有意为之？如果是这样，我如何使用原生 CSS 动画，而不需要将它们转换为 angular 动画（这可能是我已经在其他线程中找到的选项，但是，我更愿意留在css 动画（如果可能））。

Answer 1

好的，将 CSS 语句放入基础 scss 文件后，我在构建生产版本时遇到以下错误：

在 2117:4 的无效属性名称 'y' 中发出警告。忽略。

所以，问题很明显，我将 y 更改为转换，现在构建是运行。我可能会问 angular 伙计们，当在组件样式文件中使用无效属性时，是否也可以发出这些警告。

Angular CSS3 动画关键帧

Angular CSS3 keyFrames for animations

angular

angular-aot