1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- import { Animation } from '../../animations/animation';
- import { PageTransition } from '../../transitions/page-transition';
- /**
- * Animations for modals
- */
- export class ModalSlideIn extends PageTransition {
- init() {
- super.init();
- const ele = 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 = this.leavingView.pageRef().nativeElement;
- let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
- let wrapperEle = 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);
- }
- }
- export class ModalMDSlideIn extends PageTransition {
- init() {
- super.init();
- const ele = this.enteringView.pageRef().nativeElement;
- const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
- const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
- backdrop.fromTo('opacity', 0.01, 0.4);
- wrapper.fromTo('translateY', '40px', '0px');
- wrapper.fromTo('opacity', 0.01, 1);
- const DURATION = 280;
- const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
- this.element(this.enteringView.pageRef()).easing(EASING).duration(DURATION)
- .add(backdrop)
- .add(wrapper);
- }
- }
- export class ModalMDSlideOut extends PageTransition {
- init() {
- super.init();
- const ele = this.leavingView.pageRef().nativeElement;
- const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
- const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
- backdrop.fromTo('opacity', 0.4, 0.0);
- wrapper.fromTo('translateY', '0px', '40px');
- wrapper.fromTo('opacity', 0.99, 0);
- this
- .element(this.leavingView.pageRef())
- .duration(200)
- .easing('cubic-bezier(0.47,0,0.745,0.715)')
- .add(wrapper)
- .add(backdrop);
- }
- }
- //# sourceMappingURL=modal-transitions.js.map
|