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'))
    ])
  ]
})

Toggling State Method

// 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
}

However, if I remove *ngIf ng2-animation will work.

Theoretically, ngIf checks and if it's true. The element would be available on DOM. Based on my understanding, the element should also have the state inactive since it was not triggered. After clicking the trigger, the element will be available and will have the state of active.

But why it doesn't have any animation?

Is there any work around that will let me use ngIf and animation?

Answer 1

It should work with this,

toggleState(){

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

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

}

If it doesn't work (workaround)

toggleState(){

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

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

}