0

最近在写一个关于IONIC3的DEMO,发现ModelController的弹出框动画不怎么好,然后查阅api发现有enterAnimation,leaveAnimation来设置动画;但是找了好久都找不到IONIC3自带的动画;哪位大神知道IONIC3自带哪些动画,或者哪里可以查阅?

2个回答

0

ionic源码里的modal动画只有两个:slideInslideOut

export class ModalSlideIn extends PageTransition {
  init() {
    super.init();
    const ele: HTMLElement = this.enteringView.pageRef().nativeElement;
    const backdropEle = ele.querySelector('ion-backdrop');
    const backdrop = new Animation(this.plt, backdropEle);
    const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));

    wrapper.beforeStyles({ 'opacity': 1 });
    wrapper.fromTo('translateY', '100%', '0%');

    backdrop.fromTo('opacity', 0.01, 0.4);

    this
      .element(this.enteringView.pageRef())
      .easing('cubic-bezier(0.36,0.66,0.04,1)')
      .duration(400)
      .add(backdrop)
      .add(wrapper);
  }
}
export class ModalSlideOut extends PageTransition {
  init() {
    super.init();
    const ele: HTMLElement = this.leavingView.pageRef().nativeElement;
    let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
    let wrapperEle = <HTMLElement>ele.querySelector('.modal-wrapper');
    let wrapperEleRect = wrapperEle.getBoundingClientRect();
    let wrapper = new Animation(this.plt, wrapperEle);

    // height of the screen - top of the container tells us how much to scoot it down
    // so it's off-screen
    wrapper.fromTo('translateY', '0px', `${this.plt.height() - wrapperEleRect.top}px`);
    backdrop.fromTo('opacity', 0.4, 0.0);

    this
      .element(this.leavingView.pageRef())
      .easing('ease-out')
      .duration(250)
      .add(backdrop)
      .add(wrapper);
  }
}

如果想自定义动画,就自己模拟一个modal然后在transitions.ts里面自定义动画

撰写答案