ionic2/3实战-自定义modal过渡动画

需求

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

实现效果图

• 效果图代码已上传到github
  
  

上代码

• 上面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带你找源码中定义的过渡动画

3.gif