On Sep 21, 2009, at 8:44 am, Jorge Chamorro wrote:
> On 21/09/2009, at 16:51, Simon Fraser wrote:
>
>> On Sep 21, 2009, at 5:16 am, Jorge Chamorro wrote:
>>
>>> I've modified my old, hyper-forked copy of iui.js to use transitions
>>> using the "left" property just to find out that it works fine in the
>>> desktiop Safaris but not at all on the iPhones. I wrote this little
>>> code snippet in order to be able to tell at runtime whether "left"
>>> is
>>> "transitionable" or not :
>>>
>>> var hayCSSAnimado= (function () {
>>> var e= document.body.appendChild(document.createElement('div'));
>>> var es= e.style;
>>>
>>> function callback () {
>>> hayCSSAnimado= (e.offsetLeft === 10);
>>> //console.log("Callback: hayCSSAnimado: "+ hayCSSAnimado);
>>> e.removeEventListener( 'webkitTransitionEnd', callback, false);
>>> }
>>>
>>> es.position= "absolute";
>>> es.left= "0px";
>>> //fuerza posicion OK
>>> var kk= e.offsetLeft;
>>> es["-webkit-transition"]= "left 100ms";
>>> e.addEventListener( 'webkitTransitionEnd', callback, false);
>>> es.left= "10px";
>>
>> Code like this won't trigger transitions for any property. The reason
>> for this is that
>> the browser batches style changes made in the same JavaScript cycle,
>> so the
>> es.left = "10px" simply overrides the earlier es.left = "0px".
>>
>> To make a transition happen here, you need to assign the final style
>> in a setTimeout:
>>
>> style.left = "0px"
>> style.webkitTransition = "left 100ms";
>> window.setTimeout(function() {
>> style.left = "100px";
>> }, 0);
>>
>> Simon
>
> Simon,
>
> My intention was that var kk= e.offsetLeft; would force the initial
> non-animated move to left=0px. Note that that code does work fine, at
> least in desktop Safari. May be the things are a bit different on the
> iPhone, I'll give it a try, for sure. Thanks !
Actually you are right. The 'offsetLeft' forces the browser to do a
layout
pass, and so ends the style change batch.
This code should work. One reason you might not be seeing an transition
is that animating 'left' forces the browser to do a layout, and
painting,
for every frame, and this can be slow. As someone else suggested,
animating
-webkit-transform should be a lot smoother.
Simon
which can be
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
