1

在 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) 中运行良好，但在构建项目的生产版本时却无法运行。查看页面的源代码，keyFrame 不再存在（css 属性在那里）。

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

我现在的问题是：这是正常的和有意的吗？如果是这样，我如何使用本机 CSS 动画，而不需要将它们转换为角度动画（这可能是我已经在其他线程中找到的选项，但是，如果可能的话，我更愿意使用 CSS 动画）。

4

1 回答 1

1

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

在 2117:4 出现无效属性名称“y”中的警告。无视。

所以，问题很明显，我将 y 更改为 transforms 并且构建现在正在运行。当在组件样式文件中使用无效属性时，我可能会询问有角的人是否也可以发出这些警告。

于 2018-09-13T18:36:55.757 回答