Skip to content

Commit

Permalink
useTransition option
Browse files Browse the repository at this point in the history
  • Loading branch information
Matteo Spinelli committed Jun 10, 2011
1 parent 3bb2ba4 commit 69f8591
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 10 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
iScroll v4.1.2 - 2011-06-09
iScroll v4.1.3 - 2011-06-10
===========================

The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now. Read more at [cubiq.org](http://cubiq.org).
Expand Down
186 changes: 186 additions & 0 deletions examples/use-transition/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: Use transition</title>

<script type="text/javascript" src="../../src/iscroll.js"></script>

<script type="text/javascript">

var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('standard');
scroll2 = new iScroll('transition', { useTransition:true });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

</script>

<style type="text/css" media="all">
ul,li {
padding:0;
margin:0;
border:0;
}

body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
padding:20px;
}

#standard, #transition {
position:relative; z-index:1;
display:block; float:left;
width:300px; height:400px;
background:#aaa;
overflow:auto;
border:1px solid #aaa;
}

#standard {
margin-right:20px;
}

.scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}

.scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}

.scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}

#myFrame {
position:absolute;
top:0; left:0;
}

</style>
</head>
<body>
<h1>Open this page on iPad to test the difference between standard iScroll and iScroll in "transition mode"</h1>

<div id="standard">
<div class="scroller">
<ul>
<li><strong>Standard iScroll</strong></li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li><strong>Standard iScroll</strong></li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li><strong>Standard iScroll</strong></li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li><strong>Standard iScroll</strong></li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
</div>
</div>


<div id="transition">
<div class="scroller">
<ul>
<li><strong>Transition mode</strong></li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
<li>Pretty row 9</li>
<li>Pretty row 10</li>
<li><strong>Transition mode</strong></li>
<li>Pretty row 12</li>
<li>Pretty row 13</li>
<li>Pretty row 14</li>
<li>Pretty row 15</li>
<li>Pretty row 16</li>
<li>Pretty row 17</li>
<li>Pretty row 18</li>
<li>Pretty row 19</li>
<li>Pretty row 20</li>
<li><strong>Transition mode</strong></li>
<li>Pretty row 22</li>
<li>Pretty row 23</li>
<li>Pretty row 24</li>
<li>Pretty row 25</li>
<li>Pretty row 26</li>
<li>Pretty row 27</li>
<li>Pretty row 28</li>
<li>Pretty row 29</li>
<li>Pretty row 30</li>
<li><strong>Transition mode</strong></li>
<li>Pretty row 32</li>
<li>Pretty row 33</li>
<li>Pretty row 34</li>
<li>Pretty row 35</li>
<li>Pretty row 36</li>
<li>Pretty row 37</li>
<li>Pretty row 38</li>
<li>Pretty row 39</li>
<li>Pretty row 40</li>
</ul>
</div>
</div>


</body>
</html>
65 changes: 56 additions & 9 deletions src/iscroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ var m = Math,
hasTransform = vendor + 'Transform' in document.documentElement.style,
isAndroid = (/android/gi).test(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
isPlaybook = (/playbook/gi).test(navigator.appVersion),
hasTransitionEnd = (isIDevice || isPlaybook) && 'onwebkittransitionend' in window,
nextFrame = (function() {
return window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
Expand Down Expand Up @@ -63,6 +65,7 @@ var m = Math,
momentum: true,
lockDirection: true,
useTransform: true,
useTransition: false,

// Scrollbar
hScrollbar: true,
Expand Down Expand Up @@ -102,22 +105,27 @@ var m = Math,
that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
that.options.zoom = that.options.useTransform && that.options.zoom;

that.options.useTransition = hasTransitionEnd && that.options.useTransition;

// Set some default styles
that.scroller.style[vendor + 'TransitionProperty'] = that.options.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'top left';
that.scroller.style[vendor + 'TransitionDuration'] = '0';
that.scroller.style[vendor + 'TransformOrigin'] = '0 0';
if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)';

if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + '0,0' + trnClose;
else that.scroller.style.cssText += ';top:0;left:0';


if (that.options.useTransition) that.options.fixedScrollbar = true;

that.refresh();

that._bind(RESIZE_EV, window);
if (!hasTouch) that._bind('mouseout', that.wrapper);
that._bind(START_EV);
that._bind(WHEEL_EV);
// document.onmousewheel = that._wheel;
if (!hasTouch) {
that._bind('mouseout', that.wrapper);
that._bind(WHEEL_EV);
}
};

// Prototype
Expand All @@ -141,6 +149,7 @@ iScroll.prototype = {
case RESIZE_EV: that._resize(); break;
case WHEEL_EV: that._wheel(e); break;
case 'mouseout': that._mouseout(e); break;
case 'webkitTransitionEnd': that._transitionEnd(e); break;
}
},

Expand Down Expand Up @@ -178,6 +187,7 @@ iScroll.prototype = {
bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);-' + vendor + '-background-clip:padding-box;-' + vendor + '-box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';-' + vendor + '-border-radius:3px;border-radius:3px';
}
bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:-' + vendor + '-transform;-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-' + vendor + '-transition-duration:0;-' + vendor + '-transform:' + trnOpen + '0,0' + trnClose;
if (that.options.useTransition) bar.style.cssText += ';-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';

that[dir + 'ScrollbarWrapper'].appendChild(bar);
that[dir + 'ScrollbarIndicator'] = bar;
Expand Down Expand Up @@ -267,6 +277,8 @@ iScroll.prototype = {

if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);

if (that.options.useTransition) that._transitionTime(0);

that.moved = false;
that.animating = false;
that.zoomed = false;
Expand Down Expand Up @@ -299,7 +311,8 @@ iScroll.prototype = {
}

if (x != that.x || y != that.y) {
cancelFrame(that.aniTime);
if (that.options.useTransition) that._unbind('webkitTransitionEnd');
else cancelFrame(that.aniTime);
that.steps = [];
that._pos(x, y);
}
Expand Down Expand Up @@ -579,6 +592,16 @@ iScroll.prototype = {
this._end(e);
},

_transitionEnd: function (e) {
var that = this;

if (e.target != that.scroller) return;

that._unbind('webkitTransitionEnd');

that._startAni();
},


/**
*
Expand All @@ -604,6 +627,14 @@ iScroll.prototype = {

that.animating = true;
that.moved = true;

if (that.options.useTransition) {
that._transitionTime(step.time);
that._pos(step.x, step.y);
that.animating = false;
if (step.time) that._bind('webkitTransitionEnd');
return;
}

(function animate () {
var now = (new Date).getTime(),
Expand All @@ -626,6 +657,16 @@ iScroll.prototype = {
})();
},

_transitionTime: function (time) {
var that = this;

time += 'ms';
that.scroller.style[vendor + 'TransitionDuration'] = time;

if (that.hScrollbar) that.hScrollbarIndicator.style[vendor + 'TransitionDuration'] = time;
if (that.vScrollbar) that.vScrollbarIndicator.style[vendor + 'TransitionDuration'] = time;
},

_momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
var deceleration = 0.0006,
speed = m.abs(dist) / time,
Expand Down Expand Up @@ -734,8 +775,13 @@ iScroll.prototype = {
that._unbind(MOVE_EV);
that._unbind(END_EV);
that._unbind(CANCEL_EV);
that._unbind('mouseout', that.wrapper);
that._unbind(WHEEL_EV);

if (that.options.hasTouch) {
that._unbind('mouseout', that.wrapper);
that._unbind(WHEEL_EV);
}

if (that.options.useTransition) that._unbind('webkitTransitionEnd');

if (that.options.onDestroy) that.options.onDestroy.call(that);
},
Expand Down Expand Up @@ -881,7 +927,8 @@ iScroll.prototype = {
},

stop: function () {
cancelFrame(this.aniTime);
if (this.options.useTransition) this._unbind('webkitTransitionEnd');
else cancelFrame(this.aniTime);
this.steps = [];
this.moved = false;
this.animating = false;
Expand Down

0 comments on commit 69f8591

Please sign in to comment.