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