javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(scrollBar): rAF scrollbar transitions

Browse Source 
Only make changes to the scrollbar element’s style when there is a
change, and use requestAnimationFrame when there is a change.
This commit is contained in:
Adam Bradley
2014-11-10 21:11:07 -06:00
parent 246c193f9a
commit b69cad8b84
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
js/views/scrollView.js
View File

@@ -972,7 +972,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
width = 0;
}
if (width !== self.__indicatorX.size) {
self.__indicatorX.indicator.style.width = width + 'px';
ionic.requestAnimationFrame(function(){
self.__indicatorX.indicator.style.width = width + 'px';
});
}
self.__indicatorX.size = width;
self.__indicatorX.minScale = self.options.minScrollbarSizeX / width;
@@ -987,7 +989,9 @@ ionic.views.Scroll = ionic.views.View.inherit({
height = 0;
}
if (height !== self.__indicatorY.size) {
self.__indicatorY.indicator.style.height = height + 'px';
ionic.requestAnimationFrame(function(){
self.__indicatorY.indicator.style.height = height + 'px';
});
}
self.__indicatorY.size = height;
self.__indicatorY.minScale = self.options.minScrollbarSizeY / height;
@@ -1045,7 +1049,11 @@ ionic.views.Scroll = ionic.views.View.inherit({
}
self.__indicatorX.indicator.style[self.__transformProperty] = 'translate3d(' + x + 'px, 0, 0) scaleX(' + widthScale + ')';
var translate3dX = 'translate3d(' + x + 'px, 0, 0) scaleX(' + widthScale + ')';
if (self.__indicatorX.transformProp !== translate3dX) {
self.__indicatorX.indicator.style[self.__transformProperty] = translate3dX;
self.__indicatorX.transformProp = translate3dX;
}
}
if (self.__indicatorY) {
@@ -1091,10 +1099,10 @@ ionic.views.Scroll = ionic.views.View.inherit({
}
var translate3d = 'translate3d(0,' + y + 'px, 0) scaleY(' + heightScale + ')';
if (self.__indicatorY.transformProp !== translate3d) {
self.__indicatorY.indicator.style[self.__transformProperty] = translate3d;
self.__indicatorY.transformProp = translate3d;
var translate3dY = 'translate3d(0,' + y + 'px, 0) scaleY(' + heightScale + ')';
if (self.__indicatorY.transformProp !== translate3dY) {
self.__indicatorY.indicator.style[self.__transformProperty] = translate3dY;
self.__indicatorY.transformProp = translate3dY;
}
}
},