Angular2 动画不适用于 ngIf
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)
}
<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)
}