modal-transitions.js 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  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. (function (factory) {
  12. if (typeof module === "object" && typeof module.exports === "object") {
  13. var v = factory(require, exports);
  14. if (v !== undefined) module.exports = v;
  15. }
  16. else if (typeof define === "function" && define.amd) {
  17. define(["require", "exports", "../../animations/animation", "../../transitions/page-transition"], factory);
  18. }
  19. })(function (require, exports) {
  20. "use strict";
  21. Object.defineProperty(exports, "__esModule", { value: true });
  22. var animation_1 = require("../../animations/animation");
  23. var page_transition_1 = require("../../transitions/page-transition");
  24. /**
  25. * Animations for modals
  26. */
  27. var ModalSlideIn = (function (_super) {
  28. __extends(ModalSlideIn, _super);
  29. function ModalSlideIn() {
  30. return _super !== null && _super.apply(this, arguments) || this;
  31. }
  32. ModalSlideIn.prototype.init = function () {
  33. _super.prototype.init.call(this);
  34. var ele = this.enteringView.pageRef().nativeElement;
  35. var backdropEle = ele.querySelector('ion-backdrop');
  36. var backdrop = new animation_1.Animation(this.plt, backdropEle);
  37. var wrapper = new animation_1.Animation(this.plt, ele.querySelector('.modal-wrapper'));
  38. wrapper.beforeStyles({ 'opacity': 1 });
  39. wrapper.fromTo('translateY', '100%', '0%');
  40. backdrop.fromTo('opacity', 0.01, 0.4);
  41. this
  42. .element(this.enteringView.pageRef())
  43. .easing('cubic-bezier(0.36,0.66,0.04,1)')
  44. .duration(400)
  45. .add(backdrop)
  46. .add(wrapper);
  47. };
  48. return ModalSlideIn;
  49. }(page_transition_1.PageTransition));
  50. exports.ModalSlideIn = ModalSlideIn;
  51. var ModalSlideOut = (function (_super) {
  52. __extends(ModalSlideOut, _super);
  53. function ModalSlideOut() {
  54. return _super !== null && _super.apply(this, arguments) || this;
  55. }
  56. ModalSlideOut.prototype.init = function () {
  57. _super.prototype.init.call(this);
  58. var ele = this.leavingView.pageRef().nativeElement;
  59. var backdrop = new animation_1.Animation(this.plt, ele.querySelector('ion-backdrop'));
  60. var wrapperEle = ele.querySelector('.modal-wrapper');
  61. var wrapperEleRect = wrapperEle.getBoundingClientRect();
  62. var wrapper = new animation_1.Animation(this.plt, wrapperEle);
  63. // height of the screen - top of the container tells us how much to scoot it down
  64. // so it's off-screen
  65. wrapper.fromTo('translateY', '0px', this.plt.height() - wrapperEleRect.top + "px");
  66. backdrop.fromTo('opacity', 0.4, 0.0);
  67. this
  68. .element(this.leavingView.pageRef())
  69. .easing('ease-out')
  70. .duration(250)
  71. .add(backdrop)
  72. .add(wrapper);
  73. };
  74. return ModalSlideOut;
  75. }(page_transition_1.PageTransition));
  76. exports.ModalSlideOut = ModalSlideOut;
  77. var ModalMDSlideIn = (function (_super) {
  78. __extends(ModalMDSlideIn, _super);
  79. function ModalMDSlideIn() {
  80. return _super !== null && _super.apply(this, arguments) || this;
  81. }
  82. ModalMDSlideIn.prototype.init = function () {
  83. _super.prototype.init.call(this);
  84. var ele = this.enteringView.pageRef().nativeElement;
  85. var backdrop = new animation_1.Animation(this.plt, ele.querySelector('ion-backdrop'));
  86. var wrapper = new animation_1.Animation(this.plt, ele.querySelector('.modal-wrapper'));
  87. backdrop.fromTo('opacity', 0.01, 0.4);
  88. wrapper.fromTo('translateY', '40px', '0px');
  89. wrapper.fromTo('opacity', 0.01, 1);
  90. var DURATION = 280;
  91. var EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
  92. this.element(this.enteringView.pageRef()).easing(EASING).duration(DURATION)
  93. .add(backdrop)
  94. .add(wrapper);
  95. };
  96. return ModalMDSlideIn;
  97. }(page_transition_1.PageTransition));
  98. exports.ModalMDSlideIn = ModalMDSlideIn;
  99. var ModalMDSlideOut = (function (_super) {
  100. __extends(ModalMDSlideOut, _super);
  101. function ModalMDSlideOut() {
  102. return _super !== null && _super.apply(this, arguments) || this;
  103. }
  104. ModalMDSlideOut.prototype.init = function () {
  105. _super.prototype.init.call(this);
  106. var ele = this.leavingView.pageRef().nativeElement;
  107. var backdrop = new animation_1.Animation(this.plt, ele.querySelector('ion-backdrop'));
  108. var wrapper = new animation_1.Animation(this.plt, ele.querySelector('.modal-wrapper'));
  109. backdrop.fromTo('opacity', 0.4, 0.0);
  110. wrapper.fromTo('translateY', '0px', '40px');
  111. wrapper.fromTo('opacity', 0.99, 0);
  112. this
  113. .element(this.leavingView.pageRef())
  114. .duration(200)
  115. .easing('cubic-bezier(0.47,0,0.745,0.715)')
  116. .add(wrapper)
  117. .add(backdrop);
  118. };
  119. return ModalMDSlideOut;
  120. }(page_transition_1.PageTransition));
  121. exports.ModalMDSlideOut = ModalMDSlideOut;
  122. });
  123. //# sourceMappingURL=modal-transitions.js.map