我有一个列表,我试图在用户单击按钮时进行扩展和动画,但是我可以让动画工作的唯一方法是为列表的高度设置固定值。 有解决方法吗?
<ion-list>
<ion-item>
<ion-row class="item-text-wrap">
<ion-icon style="font-size: 2em;color:dodgerblue;" col-2 name="home"></ion-icon>
<div style="align-self:center;" col-10>{{ client.address }}</div>
</ion-row>
</ion-item>
<ion-item>
<ion-row class="item-text-wrap">
<ion-icon style="font-size: 2em;color:dodgerblue;" col-2 name="call"></ion-icon>
<div style="align-self:center;" col-10>{{ client.phone }}</div>
</ion-row>
</ion-item>
<ion-item>
<ion-icon name="{{ icon }}" (click)="toggleMove()"></ion-icon>
</ion-item>
</ion-list>
<ion-list [@slideDown]='state'>
<ion-item *ngFor="let key of keys">
<ion-row class="item-text-wrap">
<div style="align-self:center;" col-10>{{ client[key] }}</div>
</ion-row>
</ion-item>
</ion-list>
@Component({
selector: 'page-client-details',
templateUrl: 'client-details.html',
styles: [` `],
animations: [
trigger('slideDown', [
state('inactive', style({
maxHeight: '0',
backgroundColor: '#eee'
})),
state('active', style({
maxHeight: '*', // Want to avoid this
backgroundColor: '#cfd8dc'
})),
transition('inactive => active', animate('300ms ease-in')),
transition('active => inactive', animate('300ms ease-out'))
])
]
})
export class ClientDetailsPage {
client: any;
keys: any;
showDetails: boolean;
icon: any;
state: string = 'inactive';
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.client = navParams.get('client');
this.keys = Object.keys(this.client)
this.icon = 'ios-add-circle-outline'
}
toggleMove() {
this.icon = (this.icon === 'ios-remove-circle-outline' ? 'ios-add-circle-outline' : 'ios-remove-circle-outline')
this.state = (this.state === 'inactive' ? 'active' : 'inactive');
}
}
这可以正确确定高度,但不会为slideDown操作设置动画。