向下/向上滑动动画不与列表项一起使用。 CSS - Ionic 2

时间:2017-07-19 20:12:26

标签: css typescript animation ionic-framework ionic2

我有一个列表,当点击该列表时,应该有一个下拉动画来查看所选项目下面的项目。目前,它只是在没有动画的情况下进行填充和显示。

注意:.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;
};


}

0 个答案:

没有答案