On 22/09/2009, at 18:17, Sean Gilligan wrote:
>
> Jorge Chamorro wrote:
>> Is there a way to attach a callback for -webkit-transform:
>> translate3d
>> () without creating an animation?
>>
>> I've tried it with both addEventListener("webkitAnimationEnd",
>> callback, false); and "webkitTransitionEnd", but nothing !
>>
> There is. iUI does it:
> http://code.google.com/p/iui/source/browse/iui/iui.js?r=REL-0.30
( Why don't you use soft-tabs ! )
Well done, but... isn't "cb" the wrong callback in line 441: ("cb "
instead of "slideDone") ?
fromPage.addEventListener('webkitTransitionEnd', cb, false);
And, why doesn't translate3d(x, 0, 0) generate an end-of-whatever
event ?
Sliding should really be an animation, with a bit of bounce at the
end :-)
> See slidePages (lines 358-381) and slide2 (lines 426-443) Note that
> the
> same callback used by CSS Transitions is also used by the fallback
> timer-based animation.
>
>> Also, I see a small glitch on the screen (but only once), when the
>> on-
>> screen "ul" gets (for the first time) the .style.webkitTransform=
>> "translate3d("+ distancia+ "px, 0px, 0px)";.
>>
>
> Making sure glitches don't happen is tricky as the behavior is timing
> dependent and can be different in different places (Desktop Safari,
> Simulator, actual iPhone) and may also be dependent upon software
> versions.
I've found that the glitch happens only once at the exact moment when
the .style.webkitTransform= "translateX(npx)"; is applied to a "ul"
*for the first time*. So I do a fake .style.webkitTransform=
"translateX(0px)" asap, regardless of the slide()s.
> In the slide2 function you'll see that I'm turning off transitions
> before setting up some of the parameters. Also be aware that unless
> the
> "selected" attribute is set to "true" the div/ul will be set to
> "display: none" by iui.css.
>
> To get everything perfect takes time and testing in different places.
Sure, I know... :-)
In my (hyper-forked) iui.js the "ul" "pages" are childs of a
relatively-positioned wrapper div. That wrapper div sits centered on-
screen with equal margins (left=right="auto") at each side, and has a
max-width of "650px". As such, I can't rely on window.innerWidth and I
need to know the margins in order to add them. Here's what I've done:
var distancia= fromPage.offsetWidth+ parseInt(window.getComputedStyle($
('wrapper'),null).getPropertyValue('margin-left'), 10);
if (backwards) {
distancia= -distancia;
}
if (iui.hayCSSAnimado) {
console.log("Sliding con CSSAnimado");
var fromS= fromPage.style;
var toS= toPage.style;
var tiempo= 266;
var fromSInicial= "translateX(0px)";
var toSFinal= fromSInicial;
var fromSFinal= "translateX("+ (-distancia)+ "px)";
var toSInicial= "translateX("+ distancia+ "px)";
fromS.webkitTransitionDuration= "0ms";
fromS.webkitTransform= fromSInicial;
toPage.setAttribute("selected","true");
toS.webkitTransitionDuration= "0ms";
toS.webkitTransform= toSInicial;
toPage.removeEventListener("webkitTransitionEnd", cleanUp, false);
fromPage.removeEventListener("webkitTransitionEnd", cleanUp, false);
//the first timeout should trigger the 0ms animation to the start
positions
setTimeout(function () {
//the second timeout triggers the final animation
setTimeout(function () {
fromS.webkitTransitionDuration= tiempo+ "ms";
toS.webkitTransitionDuration= tiempo+ "ms";
fromS.webkitTransform= fromSFinal;
toS.webkitTransform= toSFinal;
toPage.addEventListener("webkitTransitionEnd", cleanUp, false);
}, 0);
}, 0);
return;
}
--
Jorge.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
