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

问题描述

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

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

虽然效果很好，但是当不仅向选定元素而且向其子元素添加更复杂的transton /动画时，它也会很快变得复杂。

对于那些主要在项目中维护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 Animation？

解决方法

不幸的是，您无法使用angulars animation API添加或删除类（请参见How to give class name to animation state in angular 2/4?）。

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