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
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
