Question

我有divA和divB。 divB在divA中，就像在我的模板代码中一样：

<div class="divA" *ngIf="state=='active'">
  <div class="divB"
    [@selectState]="state" 
  ></div>
</div>

我在组件中有他们的动画。（这是一个简单的向下滑动，当状态处于活动/非活动状态时向上滑动动画。）

@Component({
  selector: 'app-divs',
  templateUrl: './divs.component.html',
  styleUrls: ['./divs.component.css'],
  animations: [
    trigger('selectState', [
      state('inactive', style({
        height: '0rem'
      })),
      state('active', style({
        height: '*'
      })),
      transition('inactive => active', animate('300ms ease-in')),
      transition('active => inactive', animate('300ms ease-out'))
    ])
  ]
})

当state =＆＃39; active＆＃39;时，这应该创建divA并向下滑动divB。结果：创建了divA并跳过了幻灯片动画。我的问题是如何在我的代码中修复这种情况？我试图用其他变量（不是状态）创建divA，但结果是一样的。

感谢您的回答和时间！

Answer 1

尝试使用hidden代替*ngIf。创建组件时，它是以活动状态创建的，因此两个状态之间没有转换。

<div class="divA" [hidden]="state!='active'">
  <div class="divB"
    [@selectState]="state" 
  ></div>
</div>

更新

如果您必须使用*ngIf，请使用setTimeout来克服此问题。您可以为selectState声明另一个变量，然后使用"inactive"生成此变量setTimeout。像这样的东西，

<div class="divA" [hidden]="state!='active'">
  <div class="divB" [@selectState]="otherState" 
  ></div>
</div>

TS：

this.state = 'active';
this.otherState = 'inactive'
setTimeout(() => this.otherState = 'active', 100);

Answer 2

使用ChangeDetector，将其导入该组件的构造函数中，如：

private chRef: ChangeDetector

以后再使用：

chRef.detectChanges();

它将检测ngIf对dom的更改

角4动画bug

2 个答案: