I haven't tried the simulator since I have been testing with an actual
iPhone but I know that it looks great in the desktop version of Safari
4 so it is probable that this glitch is specific to the actual device.
Also in the left and right branches those values being set are for the
initial positions of the screens before new values are set so I
actually want those values to change right away. This is so that if
page A and page B need to slide to the left causing page A to go out
of view and page B to come into view (from the right edge) but page B
is off at -screen_width. So what would happen is that page B will be
moved to screen_width so that it can slide in from the right edge.
All the transition code is done in the timeout call back for exactly
the reasons you described. It was Apple's example that taught me to do
this.
Finally I did try slowing everything down including having the timeout
occur after 2 seconds after the function is called and sure enough the
glitch occurs exactly 2 seconds after I touch the element triggers
this function to be called. That tells me that the glitch happens when
you change the style on an items that has the transition property set
and so should transition without any flashing around.
This is quite a maddening problem.
On Feb 24, 9:40 pm, toriaezunama <toriaezun...@gmail.com> wrote:
> 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.
