是否可以在组件/元素的 ':enter' 或 ':leave' 事件上添加 CSS 类，例如与 Angular 10 中的动画一起使用？

Question

使用 Angular Animations 可以在元素及其子元素进入或离开视图时向它们添加过渡/动画，如下所示：

@Component({
  animations: [
    trigger('containerTrigger', [
      transition(':enter', [
        style({ opacity: 0, transform: 'translateY(-10px)' }),
        animate('250ms 100ms', style({ opacity: 1, transform: 'none' })),
      ]),
    ]),
  ]
})

虽然这工作正常，但当向所选元素及其子元素添加更复杂的过渡/动画时，它会很快变得复杂。

同样对于主要在项目中维护 CSS 的人来说，可能很难习惯 Angular 的动画语法。然后更容易阅读和维护这样的 CSS：

.container {
  opacity: 0;
  
  &.is-active {
    opacity: 1;
    transition: all 0.2s linear;
  }
}

.container__heading {
  transform: translateX(-10px);

  .container.is-active & {
      transform: none;
      transition: all 0.2s linear;
  }
}

问题：是否可以在:enter和:leave事件上添加 CSS 类而不是运行 Angular 动画？

Answer 1

不幸的是，您无法使用 Angulars 动画 API 添加或删除类（请参阅如何为 Angular 2/4 中的动画状态指定类名？）。

在这种情况下，使用eg进行绑定[ngClass]也不起作用，因为当:enter动画触发时，该元素尚未在实际的DOM中，因此任何应用的css都不会产生影响。https://angular.io/guide/transition-and-triggers#enter-and-leave-aliases