transition-ios.js 8.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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 { isPresent } from '../util/util';
  13. import { PageTransition } from './page-transition';
  14. var DURATION = 500;
  15. var EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
  16. var OPACITY = 'opacity';
  17. var TRANSFORM = 'transform';
  18. var TRANSLATEX = 'translateX';
  19. var CENTER = '0%';
  20. var OFF_OPACITY = 0.8;
  21. var SHOW_BACK_BTN_CSS = 'show-back-button';
  22. var IOSTransition = (function (_super) {
  23. __extends(IOSTransition, _super);
  24. function IOSTransition() {
  25. return _super !== null && _super.apply(this, arguments) || this;
  26. }
  27. IOSTransition.prototype.init = function () {
  28. _super.prototype.init.call(this);
  29. var plt = this.plt;
  30. var OFF_RIGHT = plt.isRTL ? '-99.5%' : '99.5%';
  31. var OFF_LEFT = plt.isRTL ? '33%' : '-33%';
  32. var enteringView = this.enteringView;
  33. var leavingView = this.leavingView;
  34. var opts = this.opts;
  35. this.duration(isPresent(opts.duration) ? opts.duration : DURATION);
  36. this.easing(isPresent(opts.easing) ? opts.easing : EASING);
  37. var backDirection = (opts.direction === 'back');
  38. var enteringHasNavbar = (enteringView && enteringView.hasNavbar());
  39. var leavingHasNavbar = (leavingView && leavingView.hasNavbar());
  40. if (enteringView) {
  41. // get the native element for the entering page
  42. var enteringPageEle = enteringView.pageRef().nativeElement;
  43. // entering content
  44. var enteringContent = new Animation(plt, enteringView.contentRef());
  45. enteringContent.element(enteringPageEle.querySelectorAll('ion-header > *:not(ion-navbar),ion-footer > *'));
  46. this.add(enteringContent);
  47. if (backDirection) {
  48. // entering content, back direction
  49. enteringContent
  50. .fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
  51. .fromTo(OPACITY, OFF_OPACITY, 1, true);
  52. }
  53. else {
  54. // entering content, forward direction
  55. enteringContent
  56. .beforeClearStyles([OPACITY])
  57. .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
  58. }
  59. if (enteringHasNavbar) {
  60. // entering page has a navbar
  61. var enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
  62. var enteringNavBar = new Animation(plt, enteringNavbarEle);
  63. this.add(enteringNavBar);
  64. var enteringTitle = new Animation(plt, enteringNavbarEle.querySelector('ion-title'));
  65. var enteringNavbarItems = new Animation(plt, enteringNavbarEle.querySelectorAll('ion-buttons,[menuToggle]'));
  66. var enteringNavbarBg = new Animation(plt, enteringNavbarEle.querySelector('.toolbar-background'));
  67. var enteringBackButton = new Animation(plt, enteringNavbarEle.querySelector('.back-button'));
  68. enteringNavBar
  69. .add(enteringTitle)
  70. .add(enteringNavbarItems)
  71. .add(enteringNavbarBg)
  72. .add(enteringBackButton);
  73. enteringTitle.fromTo(OPACITY, 0.01, 1, true);
  74. enteringNavbarItems.fromTo(OPACITY, 0.01, 1, true);
  75. // set properties depending on direction
  76. if (backDirection) {
  77. // entering navbar, back direction
  78. enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true);
  79. if (enteringView.enableBack()) {
  80. // back direction, entering page has a back button
  81. enteringBackButton
  82. .beforeAddClass(SHOW_BACK_BTN_CSS)
  83. .fromTo(OPACITY, 0.01, 1, true);
  84. }
  85. }
  86. else {
  87. // entering navbar, forward direction
  88. enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
  89. enteringNavbarBg
  90. .beforeClearStyles([OPACITY])
  91. .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
  92. if (enteringView.enableBack()) {
  93. // forward direction, entering page has a back button
  94. enteringBackButton
  95. .beforeAddClass(SHOW_BACK_BTN_CSS)
  96. .fromTo(OPACITY, 0.01, 1, true);
  97. var enteringBackBtnText = new Animation(plt, enteringNavbarEle.querySelector('.back-button-text'));
  98. enteringBackBtnText.fromTo(TRANSLATEX, (plt.isRTL ? '-100px' : '100px'), '0px');
  99. enteringNavBar.add(enteringBackBtnText);
  100. }
  101. else {
  102. enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
  103. }
  104. }
  105. }
  106. }
  107. // setup leaving view
  108. if (leavingView && leavingView.pageRef()) {
  109. // leaving content
  110. var leavingPageEle = leavingView.pageRef().nativeElement;
  111. var leavingContent = new Animation(plt, leavingView.contentRef());
  112. leavingContent.element(leavingPageEle.querySelectorAll('ion-header > *:not(ion-navbar),ion-footer > *'));
  113. this.add(leavingContent);
  114. if (backDirection) {
  115. // leaving content, back direction
  116. leavingContent
  117. .beforeClearStyles([OPACITY])
  118. .fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
  119. }
  120. else {
  121. // leaving content, forward direction
  122. leavingContent
  123. .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
  124. .fromTo(OPACITY, 1, OFF_OPACITY)
  125. .afterClearStyles([TRANSFORM, OPACITY]);
  126. }
  127. if (leavingHasNavbar) {
  128. // leaving page has a navbar
  129. var leavingNavbarEle = leavingPageEle.querySelector('ion-navbar');
  130. var leavingNavBar = new Animation(plt, leavingNavbarEle);
  131. var leavingTitle = new Animation(plt, leavingNavbarEle.querySelector('ion-title'));
  132. var leavingNavbarItems = new Animation(plt, leavingNavbarEle.querySelectorAll('ion-buttons,[menuToggle]'));
  133. var leavingNavbarBg = new Animation(plt, leavingNavbarEle.querySelector('.toolbar-background'));
  134. var leavingBackButton = new Animation(plt, leavingNavbarEle.querySelector('.back-button'));
  135. leavingNavBar
  136. .add(leavingTitle)
  137. .add(leavingNavbarItems)
  138. .add(leavingBackButton)
  139. .add(leavingNavbarBg);
  140. this.add(leavingNavBar);
  141. // fade out leaving navbar items
  142. leavingBackButton.fromTo(OPACITY, 0.99, 0);
  143. leavingTitle.fromTo(OPACITY, 0.99, 0);
  144. leavingNavbarItems.fromTo(OPACITY, 0.99, 0);
  145. if (backDirection) {
  146. // leaving navbar, back direction
  147. leavingTitle.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
  148. // leaving navbar, back direction, and there's no entering navbar
  149. // should just slide out, no fading out
  150. leavingNavbarBg
  151. .beforeClearStyles([OPACITY])
  152. .fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
  153. var leavingBackBtnText = new Animation(plt, leavingNavbarEle.querySelector('.back-button-text'));
  154. leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? -300 : 300) + 'px');
  155. leavingNavBar.add(leavingBackBtnText);
  156. }
  157. else {
  158. // leaving navbar, forward direction
  159. leavingTitle
  160. .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
  161. .afterClearStyles([TRANSFORM]);
  162. leavingBackButton.afterClearStyles([OPACITY]);
  163. leavingTitle.afterClearStyles([OPACITY]);
  164. leavingNavbarItems.afterClearStyles([OPACITY]);
  165. }
  166. }
  167. }
  168. };
  169. return IOSTransition;
  170. }(PageTransition));
  171. export { IOSTransition };
  172. //# sourceMappingURL=transition-ios.js.map