Skip to content

Commit c85e7f5

Browse files
vash15vash15
committed
Now, PageView call render method after the your animation has finished.
Add requestAnimationFrame in BaseView Bugfix
1 parent efd1561 commit c85e7f5

File tree

6 files changed

+71
-55
lines changed

6 files changed

+71
-55
lines changed

‎lib/BaseView.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,8 +98,10 @@ export default class BaseView extends View {
9898
// Manipulate z-index of the view
9999
setZindex(zIndex) {
100100
if ( _.isNumber(zIndex) ){
101-
this._zIndex = zIndex;
102-
this.el.style.zIndex = zIndex;
101+
window.requestAnimationFrame(()=>{
102+
this._zIndex = zIndex;
103+
this.el.style.zIndex = zIndex;
104+
});
103105
}
104106
return this;
105107
}
@@ -193,8 +195,11 @@ export default class BaseView extends View {
193195
// reference: http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
194196
destroy() {
195197
this.off();
196-
if (this.options.removeOnDestroy)
197-
this.remove();
198+
if (this.options.removeOnDestroy){
199+
this.requestAnimationFrame(()=>{
200+
this.remove();
201+
});
202+
}
198203
else {
199204
this.undelegateEvents();
200205
}

‎lib/ImageView.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ export default class ImageView extends BaseView {
5858
this.requestAnimationFrame(() => {
5959
this.image.src = this.src;
6060
this.requestAnimationFrame(() => {
61-
this.render();
61+
if ( this.rendered )
62+
this.render();
6263
this.trigger('loaded');
6364
});
6465
});

‎lib/PageView.js‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,14 @@ export default class PageView extends BaseView {
6161
this._oldPercent = -1;
6262
this.viewport = context.device && context.device.getViewport ? context.device.getViewport() : {width: 0, height: 0};
6363
this.isActive = false;
64-
this.status = STATUS_NORMAL;
64+
this.pageStatus = STATUS_NORMAL;
6565

6666

6767
this.setDefaultsOptions({
6868
swipeBack : true,
6969
animated : true,
7070
duration : 300,
71+
deltaPageRender : 20,
7172
viewstack : state ? state.get('viewstack') : context.viewstack,
7273
navigation : state ? state.get('navigation') : context.navigation,
7374
swipeBackDirection : 'horizontal', // horizontal, vertical, all
@@ -110,21 +111,29 @@ export default class PageView extends BaseView {
110111
// Render
111112
render() {
112113
// If the view is moving delay the render
113-
if (this.status == STATUS_MOVING) {
114+
if ( this.pageStatus == STATUS_MOVING ) {
114115
if (this.renderingTimeoutHandler)
115116
clearTimeout(this.renderingTimeoutHandler);
116117
this.renderingTimeoutHandler = setTimeout(() => {
117118
this.renderingTimeoutHandler = null;
118119
this.render();
119-
}, 300);
120+
}, this.options.duration );
120121
return;
121122
}
122123

123-
if (this.options.animated === true) {
124-
this.el.style[ getVendorStyle('transition') ] = 'transform ' + this.options.duration + 'ms';
124+
if (this.options.animated === true && !this.rendered ) {
125125
window.requestNextAnimationFrame(() => {
126-
translate3d(this.el, 0, 0, 0);
126+
this.el.style[ getVendorStyle('transition') ] = 'transform ' + this.options.duration + 'ms';
127+
translate3d(this.el, 0, 0, 0, true);
128+
if (this.renderingTimeoutHandler)
129+
clearTimeout(this.renderingTimeoutHandler);
130+
this.renderingTimeoutHandler =
131+
setTimeout(()=>{
132+
this.renderingTimeoutHandler = null;
133+
return super.render();
134+
}, this.options.duration + this.options.deltaPageRender );
127135
});
136+
return;
128137
}
129138
return super.render();
130139
}
@@ -215,10 +224,12 @@ export default class PageView extends BaseView {
215224
}
216225

217226
onBeforePop() {
218-
this.status = STATUS_MOVING;
227+
this.pageStatus = STATUS_MOVING;
219228
if (this.options.animated === true) {
220-
this.el.style[ getVendorStyle('transition') ] = 'transform '+this.options.duration+'ms';
221-
translate3d(this.el, '100%', 0, 0 );
229+
window.requestAnimationFrame(()=>{
230+
this.el.style[ getVendorStyle('transition') ] = 'transform '+this.options.duration+'ms';
231+
translate3d(this.el, '100%', 0, 0 );
232+
});
222233
}
223234
}
224235

@@ -236,7 +247,7 @@ export default class PageView extends BaseView {
236247

237248
if ( isInRect( pageX, pageY, top, left, width, height ) && this.viewport.width > 0 && !this._swipeBackStop ){
238249

239-
this.status = STATUS_MOVING;
250+
this.pageStatus = STATUS_MOVING;
240251

241252
document.addEventListener('touchmove', this.onSwipeBackTouchMove );
242253
document.addEventListener('touchend', this.onSwipeBackTouchEnd );
@@ -256,7 +267,7 @@ export default class PageView extends BaseView {
256267
onSwipeBackTouchEnd(ev){
257268
if (!ev || !ev.timeStamp || !this.isActive ) return;
258269

259-
this.status = STATUS_NORMAL;
270+
this.pageStatus = STATUS_NORMAL;
260271

261272
let ctx = context;
262273
let navigation = this.getNavigationView();

‎lib/navigations/IosBarView.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,18 @@ export default class IosBarView extends BarView {
7171
showBackButton() {
7272
this.options.hideBackButton = false;
7373
if ( !this.rendered ) return;
74-
this.cache.left.display = '';
74+
this.requestAnimationFrame(()=>{
75+
this.cache.left.display = '';
76+
});
7577
}
7678

7779
hideBackButton() {
7880
this.options.hideBackButton = true;
7981
if ( !this.rendered ) return;
80-
this.cache.left.display = 'none';
82+
this.requestAnimationFrame(()=>{
83+
this.cache.left.display = 'none';
84+
});
85+
8186
}
8287

8388
onRender(rendered) {

‎lib/navigations/NavigationView.js‎

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ export default class NavigationView extends BaseView {
7575
oldBarView.move(0, BarView.DETACH, true);
7676
}
7777

78+
// this.requestAnimationFrame(()=>{});
79+
7880
return this;
7981
}
8082

@@ -107,33 +109,20 @@ export default class NavigationView extends BaseView {
107109
}
108110

109111
setTimeout(() => {
110-
if (isView(activeBarView))
111-
activeBarView.$el.detach();
112+
this.requestAnimationFrame(()=>{
113+
if (isView(activeBarView))
114+
activeBarView.$el.detach();
115+
116+
if (isView(newBarView)) {
117+
newBarView.setZindex(0);
118+
this.$el.append(newBarView.el);
119+
}
120+
});
112121

113-
if (isView(newBarView)) {
114-
newBarView.setZindex(0);
115-
this.$el.append(newBarView.el);
116-
}
117122

118123
}, activeBarView && activeBarView.options ? activeBarView.options.duration : 300 );
119124

120-
// setTimeout(() => {
121-
// if ( isView(activeBarView) )
122-
// activeBarView.$el.detach();
123-
// this._stack.shift();
124-
//
125-
// // Retrieve the bar view from the last PageView of viewstack
126-
// let pageView = this.viewstack.getViewAtIndex( this.viewstack.size() - 2 );
127-
// if ( isView(pageView) && pageView.getNavigationBar ) {
128-
// let newBarView = pageView.getNavigationBar();
129-
// if ( isView(newBarView) ) {
130-
// newBarView.setZindex(0);
131-
// this.$el.append( newBarView.el );
132-
// this._stack.push( newBarView );
133-
// }
134-
// }
135-
//
136-
// }, activeBarView && activeBarView.options ? activeBarView.options.duration : 300 );
125+
// this.requestAnimationFrame(()=>{ });
137126

138127
}
139128

@@ -160,19 +149,21 @@ export default class NavigationView extends BaseView {
160149
}
161150

162151
onClearViewstack(viewstack) {
163-
let size = viewstack.size();
164-
_.forEach(this._stack, (aBarView) => {
165-
if ( aBarView )
166-
aBarView.$el.detach();
152+
this.requestAnimationFrame(()=>{
153+
let size = viewstack.size();
154+
_.forEach(this._stack, (aBarView) => {
155+
if ( aBarView )
156+
aBarView.$el.detach();
157+
});
158+
this._stack = [];
159+
if (size === 0) {
160+
return;
161+
}
162+
if (size > 1) {
163+
this.onPushedView(viewstack._stack[size - 2].view);
164+
}
165+
this.onPushedView(viewstack._stack[size - 1].view);
167166
});
168-
this._stack = [];
169-
if (size === 0) {
170-
return;
171-
}
172-
if (size > 1) {
173-
this.onPushedView(viewstack._stack[size - 2].view);
174-
}
175-
this.onPushedView(viewstack._stack[size - 1].view);
176167
}
177168

178169
onSwipeBack(percent, animated) {
@@ -200,8 +191,10 @@ export default class NavigationView extends BaseView {
200191
this.requestAnimationFrame(() => {
201192
this.el.style.opacity = 0;
202193
setTimeout(() => {
203-
this.el.style.display = 'none';
204-
this.visible = false;
194+
this.requestAnimationFrame(() => {
195+
this.el.style.display = 'none';
196+
this.visible = false;
197+
});
205198
}, 150);
206199
});
207200
}

‎styles/modules/_utils.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
.deactivate .overflow-scroll,
5555
.overflow-scroll.swipe-back,
5656
.overflow-scroll.deactivate {
57+
overflow: hidden;
5758
-webkit-overflow-scrolling: auto !important;
5859
overflow-scrolling: auto !important;
5960
}

0 commit comments

Comments
 (0)