javascript - 为什么我的 :leave-Animation 不起作用，尽管 :enter-animation 有效？

Question

在我的 home.component.html 中：如果我单击图标，该函数会将activateProfileSidebar布尔值设置showProfileSidebar为 true。

<i class="fas fa-user-circle user-icon" *ngIf="user" (click)="activateProfileSidebar()"> {{user.username}} </i>

<app-profile-navbar *ngIf="showProfileSidebar"></app-profile-navbar>

和 home.component.ts

ngOnInit(): void {
    this.sharedSrv.getShowProfileSidebar().subscribe(value => this.showProfileSidebar = value);
}
activateProfileSidebar(){
   this.sharedSrv.setShowProfileSidebar(true);
}

:enter-Animation 工作正常，在我的 profile-navbar.component.html 中，您可以关闭 profile-sidebar。

<nav id="sidebar" class="sidebar-wrapper" [@fade]>
     <i class="fas fa-times" (click)="closeProfileSidebar()"></i>
</nav>

profile-navbar.ts 文件

@Component({
  ...
  animations: [
    trigger('fade', [
      transition(':enter', [
          style({'width': '0' }),
          animate(200, style({'width': '260px'}))
      ]),
      transition(':leave', [
          animate(200, style({'width': '0px'}))
      ])

  ])
  ]
})

...

closeProfileSidebar(){
    this.sharedSrv.setShowProfileSidebar(false);
}

奇怪的是，只有 :enter-Animation 有效，但如果我再次关闭配置文件侧边栏，则 :leave-Animation 不起作用。

标签： javascriptangulartypescriptanimationangular-ng-if