123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { Animation } from '../../animations/animation';
  12. import { PageTransition } from '../../transitions/page-transition';
  13. /**
  14. * Animations for modals
  15. */
  16. var ModalSlideIn = (function (_super) {
  17. __extends(ModalSlideIn, _super);
  18. function ModalSlideIn() {
  19. return _super !== null && _super.apply(this, arguments) || this;
  20. }
  21. ModalSlideIn.prototype.init = function () {
  22. _super.prototype.init.call(this);
  23. var ele = this.enteringView.pageRef().nativeElement;
  24. var backdropEle = ele.querySelector('ion-backdrop');
  25. var backdrop = new Animation(this.plt, backdropEle);
  26. var wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
  27. wrapper.beforeStyles({ 'opacity': 1 });
  28. wrapper.fromTo('translateY', '100%', '0%');
  29. backdrop.fromTo('opacity', 0.01, 0.4);
  30. this
  31. .element(this.enteringView.pageRef())
  32. .easing('cubic-bezier(0.36,0.66,0.04,1)')
  33. .duration(400)
  34. .add(backdrop)
  35. .add(wrapper);
  36. };
  37. return ModalSlideIn;
  38. }(PageTransition));
  39. export { ModalSlideIn };
  40. var ModalSlideOut = (function (_super) {
  41. __extends(ModalSlideOut, _super);
  42. function ModalSlideOut() {
  43. return _super !== null && _super.apply(this, arguments) || this;
  44. }
  45. ModalSlideOut.prototype.init = function () {
  46. _super.prototype.init.call(this);
  47. var ele = this.leavingView.pageRef().nativeElement;
  48. var backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
  49. var wrapperEle = ele.querySelector('.modal-wrapper');
  50. var wrapperEleRect = wrapperEle.getBoundingClientRect();
  51. var wrapper = new Animation(this.plt, wrapperEle);
  52. // height of the screen - top of the container tells us how much to scoot it down
  53. // so it's off-screen
  54. wrapper.fromTo('translateY', '0px', this.plt.height() - wrapperEleRect.top + "px");
  55. backdrop.fromTo('opacity', 0.4, 0.0);
  56. this
  57. .element(this.leavingView.pageRef())
  58. .easing('ease-out')
  59. .duration(250)
  60. .add(backdrop)
  61. .add(wrapper);
  62. };
  63. return ModalSlideOut;
  64. }(PageTransition));
  65. export { ModalSlideOut };
  66. var ModalMDSlideIn = (function (_super) {
  67. __extends(ModalMDSlideIn, _super);
  68. function ModalMDSlideIn() {
  69. return _super !== null && _super.apply(this, arguments) || this;
  70. }
  71. ModalMDSlideIn.prototype.init = function () {
  72. _super.prototype.init.call(this);
  73. var ele = this.enteringView.pageRef().nativeElement;
  74. var backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
  75. var wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
  76. backdrop.fromTo('opacity', 0.01, 0.4);
  77. wrapper.fromTo('translateY', '40px', '0px');
  78. wrapper.fromTo('opacity', 0.01, 1);
  79. var DURATION = 280;
  80. var EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
  81. this.element(this.enteringView.pageRef()).easing(EASING).duration(DURATION)
  82. .add(backdrop)
  83. .add(wrapper);
  84. };
  85. return ModalMDSlideIn;
  86. }(PageTransition));
  87. export { ModalMDSlideIn };
  88. var ModalMDSlideOut = (function (_super) {
  89. __extends(ModalMDSlideOut, _super);
  90. function ModalMDSlideOut() {
  91. return _super !== null && _super.apply(this, arguments) || this;
  92. }
  93. ModalMDSlideOut.prototype.init = function () {
  94. _super.prototype.init.call(this);
  95. var ele = this.leavingView.pageRef().nativeElement;
  96. var backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
  97. var wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
  98. backdrop.fromTo('opacity', 0.4, 0.0);
  99. wrapper.fromTo('translateY', '0px', '40px');
  100. wrapper.fromTo('opacity', 0.99, 0);
  101. this
  102. .element(this.leavingView.pageRef())
  103. .duration(200)
  104. .easing('cubic-bezier(0.47,0,0.745,0.715)')
  105. .add(wrapper)
  106. .add(backdrop);
  107. };
  108. return ModalMDSlideOut;
  109. }(PageTransition));
  110. export { ModalMDSlideOut };
  111. //# sourceMappingURL=modal-transitions.js.map