Angular2 动画不适用于 ngIf答案

【问题标题】：Angular2 animate doesn't work with ngIfAngular2 动画不适用于 ngIf
【发布时间】：2017-02-22 03:14:28
【问题描述】：

<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 和动画？

【问题讨论】：

很确定 animate 可以与 *ngIf 一起使用，因为 animate 的重点是在元素离开和进入 DOM 时进行动画处理。
@Chrillewoodz 你试过了吗？我没有任何错误，但对我来说不能正常工作。还有，在angular.io/docs/ts/latest/guide/…，they don't use ngIf
刚刚在stackoverflow.com/questions/36417931/…更新了我的答案
如果我没记错的话，我已经用通知组件完成了它。可以使用 *ngFor，但我看不出它与 *ngIf 的行为有何不同。
@Chrillewoodz 我也将它用于 ngFor 并且效果很好。如果你不相信我，问问冈特。 :) 看看他的回答。他将 *ngIf 更改为 [隐藏]

标签： angular angular2-animation

【解决方案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)

}

【讨论】：