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 | |
28 |
|
29 |
|
30 | IOSTransition.prototype.init = function () {
|
31 | _super.prototype.init.call(this);
|
32 | var plt = this.plt;
|
33 | var OFF_RIGHT = plt.isRTL ? '-99.5%' : '99.5%';
|
34 | var OFF_LEFT = plt.isRTL ? '33%' : '-33%';
|
35 | var enteringView = this.enteringView;
|
36 | var leavingView = this.leavingView;
|
37 | var opts = this.opts;
|
38 | this.duration(isPresent(opts.duration) ? opts.duration : DURATION);
|
39 | this.easing(isPresent(opts.easing) ? opts.easing : EASING);
|
40 | var backDirection = (opts.direction === 'back');
|
41 | var enteringHasNavbar = (enteringView && enteringView.hasNavbar());
|
42 | var leavingHasNavbar = (leavingView && leavingView.hasNavbar());
|
43 | if (enteringView) {
|
44 |
|
45 | var enteringPageEle = enteringView.pageRef().nativeElement;
|
46 |
|
47 | var enteringContent = new Animation(plt, enteringView.contentRef());
|
48 | enteringContent.element(enteringPageEle.querySelectorAll('ion-header > *:not(ion-navbar),ion-footer > *'));
|
49 | this.add(enteringContent);
|
50 | if (backDirection) {
|
51 |
|
52 | enteringContent
|
53 | .fromTo(TRANSLATEX, OFF_LEFT, CENTER, true)
|
54 | .fromTo(OPACITY, OFF_OPACITY, 1, true);
|
55 | }
|
56 | else {
|
57 |
|
58 | enteringContent
|
59 | .beforeClearStyles([OPACITY])
|
60 | .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
|
61 | }
|
62 | if (enteringHasNavbar) {
|
63 |
|
64 | var enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
|
65 | var enteringNavBar = new Animation(plt, enteringNavbarEle);
|
66 | this.add(enteringNavBar);
|
67 | var enteringTitle = new Animation(plt, enteringNavbarEle.querySelector('ion-title'));
|
68 | var enteringNavbarItems = new Animation(plt, enteringNavbarEle.querySelectorAll('ion-buttons,[menuToggle]'));
|
69 | var enteringNavbarBg = new Animation(plt, enteringNavbarEle.querySelector('.toolbar-background'));
|
70 | var enteringBackButton = new Animation(plt, enteringNavbarEle.querySelector('.back-button'));
|
71 | enteringNavBar
|
72 | .add(enteringTitle)
|
73 | .add(enteringNavbarItems)
|
74 | .add(enteringNavbarBg)
|
75 | .add(enteringBackButton);
|
76 | enteringTitle.fromTo(OPACITY, 0.01, 1, true);
|
77 | enteringNavbarItems.fromTo(OPACITY, 0.01, 1, true);
|
78 |
|
79 | if (backDirection) {
|
80 |
|
81 | enteringTitle.fromTo(TRANSLATEX, OFF_LEFT, CENTER, true);
|
82 | if (enteringView.enableBack()) {
|
83 |
|
84 | enteringBackButton
|
85 | .beforeAddClass(SHOW_BACK_BTN_CSS)
|
86 | .fromTo(OPACITY, 0.01, 1, true);
|
87 | }
|
88 | }
|
89 | else {
|
90 |
|
91 | enteringTitle.fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
|
92 | enteringNavbarBg
|
93 | .beforeClearStyles([OPACITY])
|
94 | .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
|
95 | if (enteringView.enableBack()) {
|
96 |
|
97 | enteringBackButton
|
98 | .beforeAddClass(SHOW_BACK_BTN_CSS)
|
99 | .fromTo(OPACITY, 0.01, 1, true);
|
100 | var enteringBackBtnText = new Animation(plt, enteringNavbarEle.querySelector('.back-button-text'));
|
101 | enteringBackBtnText.fromTo(TRANSLATEX, (plt.isRTL ? '-100px' : '100px'), '0px');
|
102 | enteringNavBar.add(enteringBackBtnText);
|
103 | }
|
104 | else {
|
105 | enteringBackButton.beforeRemoveClass(SHOW_BACK_BTN_CSS);
|
106 | }
|
107 | }
|
108 | }
|
109 | }
|
110 |
|
111 | if (leavingView && leavingView.pageRef()) {
|
112 |
|
113 | var leavingPageEle = leavingView.pageRef().nativeElement;
|
114 | var leavingContent = new Animation(plt, leavingView.contentRef());
|
115 | leavingContent.element(leavingPageEle.querySelectorAll('ion-header > *:not(ion-navbar),ion-footer > *'));
|
116 | this.add(leavingContent);
|
117 | if (backDirection) {
|
118 |
|
119 | leavingContent
|
120 | .beforeClearStyles([OPACITY])
|
121 | .fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
|
122 | }
|
123 | else {
|
124 |
|
125 | leavingContent
|
126 | .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
|
127 | .fromTo(OPACITY, 1, OFF_OPACITY)
|
128 | .afterClearStyles([TRANSFORM, OPACITY]);
|
129 | }
|
130 | if (leavingHasNavbar) {
|
131 |
|
132 | var leavingNavbarEle = leavingPageEle.querySelector('ion-navbar');
|
133 | var leavingNavBar = new Animation(plt, leavingNavbarEle);
|
134 | var leavingTitle = new Animation(plt, leavingNavbarEle.querySelector('ion-title'));
|
135 | var leavingNavbarItems = new Animation(plt, leavingNavbarEle.querySelectorAll('ion-buttons,[menuToggle]'));
|
136 | var leavingNavbarBg = new Animation(plt, leavingNavbarEle.querySelector('.toolbar-background'));
|
137 | var leavingBackButton = new Animation(plt, leavingNavbarEle.querySelector('.back-button'));
|
138 | leavingNavBar
|
139 | .add(leavingTitle)
|
140 | .add(leavingNavbarItems)
|
141 | .add(leavingBackButton)
|
142 | .add(leavingNavbarBg);
|
143 | this.add(leavingNavBar);
|
144 |
|
145 | leavingBackButton.fromTo(OPACITY, 0.99, 0);
|
146 | leavingTitle.fromTo(OPACITY, 0.99, 0);
|
147 | leavingNavbarItems.fromTo(OPACITY, 0.99, 0);
|
148 | if (backDirection) {
|
149 |
|
150 | leavingTitle.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
|
151 |
|
152 |
|
153 | leavingNavbarBg
|
154 | .beforeClearStyles([OPACITY])
|
155 | .fromTo(TRANSLATEX, CENTER, (plt.isRTL ? '-100%' : '100%'));
|
156 | var leavingBackBtnText = new Animation(plt, leavingNavbarEle.querySelector('.back-button-text'));
|
157 | leavingBackBtnText.fromTo(TRANSLATEX, CENTER, (plt.isRTL ? -300 : 300) + 'px');
|
158 | leavingNavBar.add(leavingBackBtnText);
|
159 | }
|
160 | else {
|
161 |
|
162 | leavingTitle
|
163 | .fromTo(TRANSLATEX, CENTER, OFF_LEFT)
|
164 | .afterClearStyles([TRANSFORM]);
|
165 | leavingBackButton.afterClearStyles([OPACITY]);
|
166 | leavingTitle.afterClearStyles([OPACITY]);
|
167 | leavingNavbarItems.afterClearStyles([OPACITY]);
|
168 | }
|
169 | }
|
170 | }
|
171 | };
|
172 | return IOSTransition;
|
173 | }(PageTransition));
|
174 | export { IOSTransition };
|
175 |
|
\ | No newline at end of file |