需求
- 要实现如下图的搜索界面效果该如何实现?
- 有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
