Question

在有角项目中，我们使用以下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）将创建一个动画工作的产品构建。

现在对我来说，问题是：这是正常现象吗？如果是这样，我如何使用本机CSS动画，而无需将其转换为角度动画（这可能是我在其他线程中已经发现的一个选项，但是，如果可能的话，我宁愿使用CSS动画）。 / p>

Answer 1

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

警告在2117：4输入无效的属性名称“ y”。忽略。

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

动画的角度CSS3关键帧

1 个答案: