transition-md.js 3.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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", "../util/util", "./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 util_1 = require("../util/util");
  24. var page_transition_1 = require("./page-transition");
  25. var TRANSLATEY = 'translateY';
  26. var OFF_BOTTOM = '40px';
  27. var CENTER = '0px';
  28. var SHOW_BACK_BTN_CSS = 'show-back-button';
  29. var MDTransition = (function (_super) {
  30. __extends(MDTransition, _super);
  31. function MDTransition() {
  32. return _super !== null && _super.apply(this, arguments) || this;
  33. }
  34. MDTransition.prototype.init = function () {
  35. _super.prototype.init.call(this);
  36. var plt = this.plt;
  37. var enteringView = this.enteringView;
  38. var leavingView = this.leavingView;
  39. var opts = this.opts;
  40. // what direction is the transition going
  41. var backDirection = (opts.direction === 'back');
  42. if (enteringView) {
  43. if (backDirection) {
  44. this.duration(util_1.isPresent(opts.duration) ? opts.duration : 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
  45. }
  46. else {
  47. this.duration(util_1.isPresent(opts.duration) ? opts.duration : 280).easing('cubic-bezier(0.36,0.66,0.04,1)');
  48. this.enteringPage
  49. .fromTo(TRANSLATEY, OFF_BOTTOM, CENTER, true)
  50. .fromTo('opacity', 0.01, 1, true);
  51. }
  52. if (enteringView.hasNavbar()) {
  53. var enteringPageEle = enteringView.pageRef().nativeElement;
  54. var enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
  55. var enteringNavBar = new animation_1.Animation(plt, enteringNavbarEle);
  56. this.add(enteringNavBar);
  57. var enteringBackButton = new animation_1.Animation(plt, enteringNavbarEle.querySelector('.back-button'));
  58. this.add(enteringBackButton);
  59. if (enteringView.enableBack()) {
  60. enteringBackButton.beforeAddClass(SHOW_BACK_BTN_CSS);
  61. }
  62. else {
  63. enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
  64. }
  65. }
  66. }
  67. // setup leaving view
  68. if (leavingView && backDirection) {
  69. // leaving content
  70. this.duration(opts.duration || 200).easing('cubic-bezier(0.47,0,0.745,0.715)');
  71. var leavingPage = new animation_1.Animation(plt, leavingView.pageRef());
  72. this.add(leavingPage.fromTo(TRANSLATEY, CENTER, OFF_BOTTOM).fromTo('opacity', 1, 0));
  73. }
  74. };
  75. return MDTransition;
  76. }(page_transition_1.PageTransition));
  77. exports.MDTransition = MDTransition;
  78. });
  79. //# sourceMappingURL=transition-md.js.map