Angular - 将类与 ngIf 结合使用似乎不起作用

Question

我正在根据条件创建一个组件：

<div *ngIf="showContainer" class="container">

现在我想给它添加一些动画，这意味着我想融入容器中，而不是让它突然出现。我在想以下几点:

<div *ngIf="showContainer" class="container" [ngClass]="{'show': showContainer, 'hide': !showContainer}">

然后在我的SCSS文件中，我添加了以下内容：

css prettyprint-override">.container {
   transition: opacity 3s linear;
      
   &.show {
     opacity: 1;
   }
    
   &.hide {
     opacity: 0;
   }
}

现在，这个动画根本不起作用。我在单击图标时切换Show Container变量，并且我已经验证了该变量实际上正在切换！我有一种感觉，这可能与*ngIF指令有关。有人能帮我吗？

Answer 1

请尝试使用以下类。

<div *ngIf="showContainer" class="container"
  [class.show]="showContainer"
  [class.hide]="!showContainer"
>

不能告诉你这不起作用的原因，对我来说似乎很好。但我可以体验到的是，如果您已经在使用类，则[ngclass]不会考虑，因为它是相同的属性。

删除class=“container”，并将其放入具有默认true值的ngClass中。

<div *ngIf="showContainer" [ngClass]="{'container': true, 'show': showContainer, 'hide': !showContainer}">