Angular2 动画不适用于 ngIf

Posted 2023-03-06

【中文标题】Angular2 动画不适用于 ngIf

【英文标题】：Angular2 animate doesn't work with 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

刚刚在***.com/questions/36417931/…更新了我的答案

如果我没记错的话，我已经用通知组件完成了它。可以使用 *ngFor，但我看不出它与 *ngIf 的行为有何不同。

@Chrillewoodz 我也将它用于 ngFor 并且效果很好。如果你不相信我，问问冈特。 :) 看看他的回答。他将 *ngIf 更改为 [隐藏]

【参考方案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)