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

Question

使用 Angular Animations 可以在元素及其子元素进入或离开 View 时为其添加过渡/动画，如下所示:

@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 上添加 CSS 类？和 :leave事件而不是运行 Angular 动画？

Answer 1

不幸的是，您不能使用 angulars 动画 API 添加或删除类(参见 How to give class name to animation state in angular 2/4?)。
绑定(bind)例如[ngClass]在这种情况下也不会工作，因为当 :enter动画触发，元素还没有在实际的 DOM 中，所以任何应用的 css 都不会产生影响。 https://angular.io/guide/transition-and-triggers#enter-and-leave-aliases