有没有办法在 Angular 动画过渡期间应用常量 CSS 样式？

Question

我想在该元素的动画过渡期间将固定样式应用于该元素。问题是过渡的默认行为也会使样式动画化。例如，在此示例中，红色背景在动画期间逐渐消失（它也是动画的）：

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

这里我想让背景随着元素高度的变化而一直是红色。有没有办法用 Angular 动画实现这样的效果？

Answer 1

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

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

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

Answer 2

我找到了使用 CSS/Sass 执行此操作的方法。您可以通过在 CSS.

中使用 .ng-animating class 选择器来实现此效果

例如，如果您的动画针对具有 class .list 的列表，您可以执行以下操作：

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

或者如果嵌套在 SCSS 中：

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

有没有办法在 Angular 动画过渡期间应用常量 CSS 样式？

Is there a way to apply a constant CSS style during Angular animation transition?

css

sass

css-animations

typescript

angular