需求

• 要實(shí)現(xiàn)如下圖的搜索界面效果該如何實(shí)現(xiàn)?
• 有ionic開發(fā)經(jīng)驗(yàn)的同學(xué),看到這個(gè)界面很容易想到Ionic Modal,但是Modal默認(rèn)過渡動(dòng)畫是從頁面底部彈上來,而我們需要從頁面右側(cè)彈出頁面,這時(shí)就需要自定義modal的過渡動(dòng)畫
  

實(shí)現(xiàn)效果圖

• 效果圖代碼已上傳到github
  

上代碼

• 上面gif效果圖提供了兩個(gè)動(dòng)畫,我這里代碼只附上動(dòng)畫2代碼
• 新建一個(gè)modal-transitions.ts文件用于定義modal過渡動(dòng)畫
  

import {Animation, PageTransition} from 'ionic-angular';

export class ModalFromRightEnter extends PageTransition {
  public init() {
    const ele = this.enteringView.pageRef().nativeElement;
    const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
    backdrop.beforeStyles({'z-index': 0, 'opacity': 0.3, 'visibility': 'visible'});
    const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
    wrapper.fromTo('transform', 'translateX(100%)', 'translateX(20%)');
    const contentWrapper = new Animation(this.plt, ele.querySelector('ion-content.content'));
    contentWrapper.beforeStyles({'width': '80%'});
    this
      .element(this.enteringView.pageRef())
      .duration(300)
      .easing('cubic-bezier(.25, .1, .25, 1)')
      .add(backdrop)
      .add(wrapper)
      .add(contentWrapper);
  }
}

export class ModalFromRightLeave extends PageTransition {
  public init() {
    const ele = this.leavingView.pageRef().nativeElement;
    const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
    backdrop.beforeStyles({'visibility': 'hidden'});
    const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
    wrapper.fromTo('transform', 'translateX(20%)', 'translateX(100%)');
    this
      .element(this.leavingView.pageRef())
      .duration(300)
      .easing('cubic-bezier(.25, .1, .25, 1)')
      .add(backdrop)
      .add(wrapper);
  }
}


export class ModalScaleEnter extends PageTransition {
  public init() {
    const ele = this.enteringView.pageRef().nativeElement;
    const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
    wrapper.fromTo('transform', 'scale(0)', 'scale(1)');

    this
      .element(this.enteringView.pageRef())
      .duration(400)
      .easing('cubic-bezier(.1, .7, .1, 1)')
      .add(wrapper);
  }
}

export class ModalScaleLeave extends PageTransition {
  public init() {
    const ele = this.leavingView.pageRef().nativeElement;
    const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
    wrapper.fromTo('transform', 'scale(1)', 'scale(0)');

    this
      .element(this.leavingView.pageRef())
      .duration(400)
      .easing('cubic-bezier(.1, .7, .1, 1)')
      .add(wrapper);
  }
}

• 在app.module.ts文件中配置過渡動(dòng)畫
  

import {Config} from 'ionic-angular';
import {ModalFromRightEnter, ModalFromRightLeave} from "./modal-transitions";

export class AppModule {
  constructor(public config: Config) {
    this.setCustomTransitions();
  }

  private setCustomTransitions() {
    this.config.setTransition('modal-from-right-enter', ModalFromRightEnter);
    this.config.setTransition('modal-from-right-leave', ModalFromRightLeave);
  }
}

使用

• 還不會(huì)使用modal去看api,使用我們自定義的動(dòng)畫如下圖,給create方法傳入第三個(gè)參數(shù)即可
  

 this.modalCtrl.create(ModalFromRightPage, {}, {
      enterAnimation: 'modal-from-right-enter',
      leaveAnimation: 'modal-from-right-leave'
    }).present();

最后

• 請(qǐng)認(rèn)真看modal-transitions.ts定義的動(dòng)畫代碼,看懂后就可以定義更多更漂亮的動(dòng)畫;不止可以定義modal動(dòng)畫,還可以自定義page,toast,popover等其他組件動(dòng)畫
• 在定義動(dòng)畫過程中可以學(xué)習(xí)源碼是怎么定義的,如下gif帶你找源碼中定義的過渡動(dòng)畫

3.gif