javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed final rubber banding issue

Browse Source
This commit is contained in:
Max Lynch
2013-10-25 18:00:19 -05:00
parent 70946699a5
commit 4193347e11
2 changed files with 44 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
dist/js/ionic.js vendored
View File

@ -2576,6 +2576,7 @@ window.ionic = {
y = this.y; y = this.y;
} }
el.offsetHeight;
el.style.webkitTransitionTimingFunction = easing; el.style.webkitTransitionTimingFunction = easing;
el.style.webkitTransitionDuration = time; el.style.webkitTransitionDuration = time;
el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)'; el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
@ -2729,19 +2730,29 @@ window.ionic = {
}, },
_onTransitionEnd: function(e) { _onTransitionEnd: function(e) {
var _this = this;
if (e.target != this.el) { if (e.target != this.el) {
return; return;
} }
this.el.style.webkitTransitionDuration = '0'; // Triggered to end scroll, once the final animation has ended
if(this._didEndScroll) {
if(this.wrapScrollPosition(this.bounceTime)) { this._didEndScroll = false;
ionic.trigger(this.scrollEndEventName, { ionic.trigger(_this.scrollEndEventName, {
target: this.el, target: _this.el,
scrollLeft: this.x, scrollLeft: _this.x,
scrollTop: this.y scrollTop: _this.y
}); });
} }
this.el.style.webkitTransitionDuration = '0';
window.requestAnimationFrame(function() {
if(_this.wrapScrollPosition(_this.bounceTime)) {
_this._didEndScroll = true;
}
});
}, },
_onScrollEnd: function() { _onScrollEnd: function() {
@ -2946,6 +2957,8 @@ window.ionic = {
// Calculate the viewport height and the height of the content // Calculate the viewport height and the height of the content
var totalWidth = _this.el.scrollWidth; var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.scrollHeight; var totalHeight = _this.el.scrollHeight;
// The parent bounding box helps us figure max/min scroll amounts
var parentWidth = _this.el.parentNode.offsetWidth; var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight; var parentHeight = _this.el.parentNode.offsetHeight;
@ -2965,7 +2978,8 @@ window.ionic = {
return; return;
} }
// If the duration is within reasonable bounds, enable momentum scrolling // If the duration is within reasonable bounds, enable momentum scrolling so we
// can "slide" to a finishing point
if(duration < 300) { if(duration < 300) {
var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth); var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight); var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);

30
js/views/scrollView.js
View File

@ -93,6 +93,7 @@
y = this.y; y = this.y;
} }
el.offsetHeight;
el.style.webkitTransitionTimingFunction = easing; el.style.webkitTransitionTimingFunction = easing;
el.style.webkitTransitionDuration = time; el.style.webkitTransitionDuration = time;
el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)'; el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
@ -246,19 +247,29 @@
}, },
_onTransitionEnd: function(e) { _onTransitionEnd: function(e) {
var _this = this;
if (e.target != this.el) { if (e.target != this.el) {
return; return;
} }
this.el.style.webkitTransitionDuration = '0'; // Triggered to end scroll, once the final animation has ended
if(this._didEndScroll) {
if(this.wrapScrollPosition(this.bounceTime)) { this._didEndScroll = false;
ionic.trigger(this.scrollEndEventName, { ionic.trigger(_this.scrollEndEventName, {
target: this.el, target: _this.el,
scrollLeft: this.x, scrollLeft: _this.x,
scrollTop: this.y scrollTop: _this.y
}); });
} }
this.el.style.webkitTransitionDuration = '0';
window.requestAnimationFrame(function() {
if(_this.wrapScrollPosition(_this.bounceTime)) {
_this._didEndScroll = true;
}
});
}, },
_onScrollEnd: function() { _onScrollEnd: function() {
@ -463,6 +474,8 @@
// Calculate the viewport height and the height of the content // Calculate the viewport height and the height of the content
var totalWidth = _this.el.scrollWidth; var totalWidth = _this.el.scrollWidth;
var totalHeight = _this.el.scrollHeight; var totalHeight = _this.el.scrollHeight;
// The parent bounding box helps us figure max/min scroll amounts
var parentWidth = _this.el.parentNode.offsetWidth; var parentWidth = _this.el.parentNode.offsetWidth;
var parentHeight = _this.el.parentNode.offsetHeight; var parentHeight = _this.el.parentNode.offsetHeight;
@ -482,7 +495,8 @@
return; return;
} }
// If the duration is within reasonable bounds, enable momentum scrolling // If the duration is within reasonable bounds, enable momentum scrolling so we
// can "slide" to a finishing point
if(duration < 300) { if(duration < 300) {
var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth); var momentumX = _this._getMomentum(_this.x, drag.startX, duration, parentWidth - totalWidth, parentWidth);
var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight); var momentumY = _this._getMomentum(_this.y, drag.startY, duration, parentHeight - totalHeight, parentHeight);