角度2:动画向下滑动,高度未知

时间:2017-04-17 18:15:13

标签: angular ionic2 transitions

我有一个列表,我试图在用户单击按钮时进行扩展和动画,但是我可以让动画工作的唯一方法是为列表的高度设置固定值。 有解决方法吗?

  <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操作设置动画。

0 个答案:

没有答案