Here is the JS function that does the transition, the function $() is
just a shorthand function for document.getElementById() and
active_page, active_header, inactive_page, inactive_header are global
variables defined by another function that are strings with the IDs
for HTML elements. screen_width is set by an orientation change event
handler (320 for portrait mode, 480 for landscape mode). This is
actually a simplified version of what I was able to gleam from Apple's
example code called SimpleBrowser.
function trans(direction) {
if(moved_after_touch || transitions_in_progress) {
return;
}
transitions_in_progress = true;
var from = $(inactive_page);
var to = $(active_page);
var hfrom = $(inactive_header);
var hto = $(active_header);
from.style.webkitTransition = 'none 0s';
to.style.webkitTransition = 'none 0s';
hfrom.style.webkitTransition = 'none 0s';
hto.style.webkitTransition = 'none 0s';
hfrom.style.opacity = 1;
hto.style.opacity = 0;
var to_final = 'translateX(0px)'
if(direction == 'left') {
from.style.webkitTransform = 'translateX(0px)';
to.style.webkitTransform = 'translateX('+screen_width+'px)';
hfrom.style.webkitTransform = 'translateX(0px)';
hto.style.webkitTransform = 'translateX('+screen_width+'px)';
var from_final = 'translateX(-'+screen_width+'px)';
}
else if(direction == 'right') {
from.style.webkitTransform = 'translateX(0px)';
to.style.webkitTransform = 'translateX(-'+screen_width+'px)';
hfrom.style.webkitTransform = 'translateX(0px)';
hto.style.webkitTransform = 'translateX(-'+screen_width+'px)';
var from_final = 'translateX('+screen_width+'px)';
}
setTimeout(function () {
var trans_time = '0.75s';
from.style.webkitTransitionProperty = '-webkit-transform';
from.style.webkitTransitionDuration = trans_time;
to.style.webkitTransitionProperty = '-webkit-transform';
to.style.webkitTransitionDuration = trans_time;
hfrom.style.webkitTransitionProperty = 'opacity,
-webkit-transform';
hfrom.style.webkitTransitionDuration = trans_time+',
'+trans_time;
hto.style.webkitTransitionProperty = 'opacity,
-webkit-transform';
hto.style.webkitTransitionDuration = trans_time+', '+trans_time;
from.style.webkitTransform = from_final;
to.style.webkitTransform = to_final;
hfrom.style.webkitTransform = from_final;
hto.style.webkitTransform = to_final;
hfrom.style.opacity = 0;
hto.style.opacity = 1;
}, 0);
}
On Feb 22, 8:39 pm, toriaezunama <[email protected]> wrote:
> Hi Brian
>
> Do you have any example code for this?
>
> On Feb 23, 7:18 am, Brian <[email protected]> wrote:
>
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
