[英]Angular2 animate doesn't work with ngIf
<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 和動畫?
它應該適用於此,
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)
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.