有没有办法在 Angular 动画过渡期间应用恒定的 CSS 样式？答案

【问题标题】：Is there a way to apply a constant CSS style during Angular animation transition?有没有办法在 Angular 动画过渡期间应用恒定的 CSS 样式？
【发布时间】：2021-10-21 00:17:03
【问题描述】：

我想在该元素的动画过渡期间对该元素应用一个常量样式。问题是过渡的默认行为也会为样式设置动画。例如在这个例子中，红色背景在动画过程中逐渐消失（它也是动画的）：

animations: [
  trigger('animate', [
    state('true', style({ height: '10px' })),
    state('false', style({ height: '30px' })),
    transition('true<=>false', [
      style({ backgroundColor: 'red' }),
      animate('5s'),
    ]),
  ])
]

在这里，我想让背景随着元素高度的变化而不断变红。有没有办法通过 Angular 动画实现这样的效果？

【问题讨论】：

标签： css angular typescript sass css-animations

【解决方案1】：

我找到了一种使用 CSS/Sass 的方法。您可以通过在 CSS 中使用 .ng-animating 类选择器来实现此效果。

例如，如果您的动画针对的是具有 .list 类的列表，您可以这样做：

.list.ng-animating {
  background-color: red;
}

或者如果嵌套在 SCSS 中：

.list {
  &.ng-animating {
    background-color: red;
  }
}

【讨论】：

【解决方案2】：

为什么要更改元素样式而不是添加一个类来执行该特定功能？添加一个类：

.bg-red{
  background-color:red !important;
}

然后在您不再需要它时将其删除。 !important 是避免样式标签中的任何内容覆盖它。

【讨论】：

我希望红色背景仅在动画在两种状态之间转换时出现。如果我使用这样的类，背景将始终为红色，而不仅仅是在过渡期间。我也不认为可以从 Angular 动画中操作 HTML 类，但我可能错了。