Angular2 动画不适用于 ngIf

Question

<div *ngIf="clientTable" [@clientTableState]="testAnimate.state" class="clientdata">
  <div class="table-holder">
    <table id="header-fixed"><a (click)="closeClientTable()" class="table-close"><i class="ion-close-circled"></i></a>
      <tr>
        <th colspan="8">{{ clientTableHeader }}</th>
      </tr>
      <tr>
        <th rowspan="2">Bookie</th>
        <th colspan="3">Payment</th>
        <th colspan="3">Bookie</th>
        <th rowspan="2">Balance</th>
      </tr>
    </table>
  </div>
</div> 

@Component({
  templateUrl: 'app/html-templates/bookiedata.html',
  styleUrls: ['css/templates.css'],
  animations: [
    trigger('clientTableState', [
        state('inactive', style({
            opacity: 0
        })),
        state('active', style({
            opacity: 1
        })),
        transition('inactive => active', animate('0.8s ease-in-out')),
        transition('active => inactive', animate('0.8s ease-in-out'))
    ])
  ]
})

切换状态方法

// declaration
clientTable: boolean = false
testAnimate: any = { state: 'inactive' }

// method
toggleState(){
    this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'
    this.clientTable = true
}

但是，如果我删除 *ngIf ng2-animation将起作用。

理论上，ngIf 会检查它是否为真。 该元素将在 DOM 上可用。 根据我的理解，该元素也应该处于非活动状态，因为它没有被触发。 单击触发器后，该元素将可用并处于活动状态。

但为什么它没有任何动画？

是否有任何解决方法可以让我使用 ngIf 和动画？

Answer 1

它应该适用于此，

toggleState(){

    this.clientTable = true          //<<<===changed order.

    this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'

}

如果它不起作用（解决方法）

toggleState(){

    this.clientTable = true          //<<<===changed order.

    setTimout(()=>{
       this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'
    },2000)

}