I tried using dashcode & your source code running on the simulator to
recreate this problem but haven't managed it (if you want i can send
you the dashcode project to see that i am doing this in the same way
as you). Is this a device only thing or does the simulator also have
the problem?
Just some thoughts:
Taking the left or right branch of the code sets the initial
transforms for the 'from' & 'to' objects and hence they will appear in
those positions for 1 frame before the transition starts when the
setTimeout callback gets called. This is because, the transition is
set then javascript execution ends returning control to the OS which
then performs the updates/rendering on the css before calling the
javascript again with the call back.
One tip for debugging transitions/animations is to set the duration to
a high value e.g. 5s so that you can see what happens in slow motion.
I would be more inclined to write the code using css for the
transition info and just using javascript to change the class on the
element to initiate the transition. This doesn't work in the case
where the various parameters of the transition change dynamically at
run time but for simple slide in/out transitions can make life easier.
On Feb 23, 12:33 pm, Brian <brianmla...@gmail.com> wrote:
> 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 <toriaezun...@gmail.com> wrote:
>
> > Hi Brian
>
> > Do you have any example code for this?
>
> > On Feb 23, 7:18 am, Brian <brianmla...@gmail.com> wrote:
--
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to iphoneweb...@googlegroups.com.
To unsubscribe from this group, send email to
iphonewebdev+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en.
