是否可以在 component/element 的 ':enter' 或 ':leave' 事件上添加 CSS class，就像 Angular 10 中的动画一样？

Question

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

@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 class 而不是运行一个 Angular 动画？

Answer 1

不幸的是，您无法使用角度动画 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

是否可以在 component/element 的 ':enter' 或 ':leave' 事件上添加 CSS class，就像 Angular 10 中的动画一样？

Is it possible to add a CSS class on ':enter' or ':leave' events of a component/element like used with Animations in Angular 10?

css-transitions

angular

angular-animations