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

Question

我在 Angular 组件中添加了进入和离开动画。我在哪里根据布尔变量为 div 的高度设置动画。动画工作正常，但有没有办法在初始视图加载时关闭动画？

Component.ts

    animations: [
            trigger('slideInOut', [
                transition(':enter', [
                    style({ height: '0', overflow: 'hidden', opacity: 0 }),
                    animate('200ms ease-in-out', style({ height: '*', opacity: 1 }))
                ]),
                transition(':leave', [
                    animate(
                        '200ms ease-in-out',
                        style({ height: 0, overflow: 'hidden', opacity: 0 })
                    )
                ])
            ])
    ]

Component.html

<div class="sidebar-sub-menu" *ngIf="isSubMenuOpen || setSubmenuActive" [@slideInOut]>
  ...
</div>

Answer 1

在元素本身上使用[@.disabled]="isPaused"来防止动画；其中 isPaused 是一个布尔变量，等于 true.

在您的情况下，您可以在 constructor 中将 isPaused 变量初始化为 true，然后您可以选择使用这样的超时重新启用它

constructor() {
    this.isPaused= true;
    setTimeout(() => {
      this.isPaused= false;
    }, 1000);
}

或者您可以在特定条件下将其指定为 true。

希望对您有所帮助。

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

Disable animation on initial view / page load : Angular

angular

angular-animations