需求

• 要实现如下图的搜索界面效果该如何实现?
• 有ionic开发经验的同学,看到这个界面很容易想到Ionic Modal,但是Modal默认过渡动画是从页面底部弹上来,而我们需要从页面右侧弹出页面,这时就需要自定义modal的过渡动画
• 

实现效果图

上代码

• 上面gif效果图提供了两个动画,我这里代码只附上动画2代码
• 新建一个modal-transitions.ts文件用于定义modal过渡动画
• 

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文件中配置过渡动画

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);

  }

}

使用

• 还不会使用modal去看api,使用我们自定义的动画如下图,给create方法传入第三个参数即可

this.modalCtrl.create(ModalFromRightPage, {}, {   

   enterAnimation: 'modal-from-right-enter', 

   leaveAnimation: 'modal-from-right-leave'  

  }).present();

最后

• 请认真看modal-transitions.ts定义的动画代码,看懂后就可以定义更多更漂亮的动画;不止可以定义modal动画,还可以自定义page,toast,popover等其他组件动画
• 在定义动画过程中可以学习源码是怎么定义的,如下gif带你找源码中定义的过渡动画