1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. import { Animation } from '../../animations/animation';
  2. import { PageTransition } from '../../transitions/page-transition';
  3. /**
  4. * Animations for modals
  5. */
  6. export class ModalSlideIn extends PageTransition {
  7. init() {
  8. super.init();
  9. const ele = this.enteringView.pageRef().nativeElement;
  10. const backdropEle = ele.querySelector('ion-backdrop');
  11. const backdrop = new Animation(this.plt, backdropEle);
  12. const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
  13. wrapper.beforeStyles({ 'opacity': 1 });
  14. wrapper.fromTo('translateY', '100%', '0%');
  15. backdrop.fromTo('opacity', 0.01, 0.4);
  16. this
  17. .element(this.enteringView.pageRef())
  18. .easing('cubic-bezier(0.36,0.66,0.04,1)')
  19. .duration(400)
  20. .add(backdrop)
  21. .add(wrapper);
  22. }
  23. }
  24. export class ModalSlideOut extends PageTransition {
  25. init() {
  26. super.init();
  27. const ele = this.leavingView.pageRef().nativeElement;
  28. let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
  29. let wrapperEle = ele.querySelector('.modal-wrapper');
  30. let wrapperEleRect = wrapperEle.getBoundingClientRect();
  31. let wrapper = new Animation(this.plt, wrapperEle);
  32. // height of the screen - top of the container tells us how much to scoot it down
  33. // so it's off-screen
  34. wrapper.fromTo('translateY', '0px', `${this.plt.height() - wrapperEleRect.top}px`);
  35. backdrop.fromTo('opacity', 0.4, 0.0);
  36. this
  37. .element(this.leavingView.pageRef())
  38. .easing('ease-out')
  39. .duration(250)
  40. .add(backdrop)
  41. .add(wrapper);
  42. }
  43. }
  44. export class ModalMDSlideIn extends PageTransition {
  45. init() {
  46. super.init();
  47. const ele = this.enteringView.pageRef().nativeElement;
  48. const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
  49. const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
  50. backdrop.fromTo('opacity', 0.01, 0.4);
  51. wrapper.fromTo('translateY', '40px', '0px');
  52. wrapper.fromTo('opacity', 0.01, 1);
  53. const DURATION = 280;
  54. const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
  55. this.element(this.enteringView.pageRef()).easing(EASING).duration(DURATION)
  56. .add(backdrop)
  57. .add(wrapper);
  58. }
  59. }
  60. export class ModalMDSlideOut extends PageTransition {
  61. init() {
  62. super.init();
  63. const ele = this.leavingView.pageRef().nativeElement;
  64. const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
  65. const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
  66. backdrop.fromTo('opacity', 0.4, 0.0);
  67. wrapper.fromTo('translateY', '0px', '40px');
  68. wrapper.fromTo('opacity', 0.99, 0);
  69. this
  70. .element(this.leavingView.pageRef())
  71. .duration(200)
  72. .easing('cubic-bezier(0.47,0,0.745,0.715)')
  73. .add(wrapper)
  74. .add(backdrop);
  75. }
  76. }
  77. //# sourceMappingURL=modal-transitions.js.map