Angular：在初始视图/页面加载时禁用动画

Question

我有一个带有项目列表的 Angular 4 组件。我按照 Angular 文档 ( https://angular.io/api/animations/animation ) 在添加或删除项目时设置进入和离开动画。但是在加载视图时，列表中的所有现有项目都会播放相同的动画。有没有办法在初始视图加载时关闭动画，但在视图加载后重新启用它？

Answer 1

您可以为添加的组件定义专用的动画状态。

然后你将有 3 个过渡

1. void => * // 初始加载 - 无动画
2. void => added // 添加组件的动画
3. * => void // 移除组件的动画

Answer 2

以防万一有人正在寻找实际答案 - 如果您有带触发器的动画，则可以使用如下属性来:enter完成：@.disabled

<div @someAnimation [@.disabled]="animationDisabled"></div>

然后在组件中，您只需在视图初始化后将animationDisabled属性更改为：true

@Component({
    // ...
})
export class SomeComponent implements AfterViewInit {
   
    animationDisabled: boolean = true;

    ngAfterViewInit(): void {
        this.animationDisabled = false;
    }

}

现在动画不会在组件初始化时运行，但仍会在组件的生命周期内运行