我有一个列表,当点击该列表时,应该有一个下拉动画来查看所选项目下面的项目。目前,它只是在没有动画的情况下进行填充和显示。
注意:.item-accordion.hidden {line-height:0px;并且在组件上切换类也不起作用。
这是我想要实现的一个例子,但它与Ionic 1有关。https://codepen.io/anon/pen/OgYoaL
CSS
.item-accordion{ line-height: 25px; transition: .09s all linear; }
.item-accordion [hidden]{ line-height: 0px; }
HTML
<div *ngFor="let item of items; index as i; odd as isOdd; even as isEven">
<ion-item-sliding id="rightdiv" >
<button ion-item (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" class="destInfo">
<h3>click for more info</h3>
</button>
<ion-item [hidden]="!isGroupShown(i)" class="details item-accordion">
<ion-label item-left>something</ion-label>
</ion-item>
<ion-item [hidden]="!isGroupShown(i)" class="details item-accordion">
<ion-label item-left>something</ion-label>
</ion-item>
<ion-item [hidden]="!isGroupShown(i)" class="detail-button item-accordion" >
<button>click me</button>
</ion-item>
</ion-item-sliding>
打字稿
import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController, ModalController, AlertController, ItemSliding, Nav } from 'ionic-angular';
import { Items } from '../../providers/providers';
import { Item } from '../../models/item';
@Component({
selector: 'page-list-master',
templateUrl: 'rider-master.html'
})
export class RiderMasterPage {
items: Item[];
index: number;
shownGroup = null;
isInactiveOne: boolean = false;
isInactiveTwo: boolean = true;
activeItemSliding: ItemSliding = null;
constructor(public navCtrl: NavController, public items: Items, public modalCtrl: ModalController, private el: ElementRef, public alertCtrl: AlertController) {
this.items = this.items.query();
}
/**
* The view loaded, let's query our items for the list
*/
ionViewDidLoad() {
}
toggleGroup(group){
if (this.isGroupShown(group)){
this.shownGroup = null;
} else {
this.shownGroup = group;
}
}
isGroupShown(group){
return this.shownGroup === group;
};
}