Ok so I think I figured out what's going on thanks to Chrilith's
help. In order for the transitions to show, you have to wrap the
style.left assignment in a setTimeout 0. So here's my updated
slidePages function:
function slidePages(fromPage, toPage, backwards)
{
var axis = (backwards ? fromPage : toPage).getAttribute("axis");
if (axis == "y")
(backwards ? fromPage : toPage).style.top = "100%";
else
toPage.style.left = "100%";
toPage.setAttribute("selected", "true");
scrollTo(0, 1);
clearInterval(checkTimer);
setTimeout(function(){
if (axis == "y")
{
backwards
? fromPage.style.top = "100%"
: toPage.style.top = "0%";
}
else
{
fromPage.style.left = backwards ? "100%" : "-100%";
toPage.style.left = "0%";
}
}, 0);
if (!hasClass(toPage, "dialog"))
fromPage.removeAttribute("selected");
checkTimer = setInterval(checkOrientAndLocation, 300);
setTimeout(updatePage, 0, toPage, fromPage);
}
Then I created an entry in my iui.css like:
.slide {
-webkit-transition: left 0.2s linear, top 0.2s linear;
}
and applied the slide class to any of my elements that acted as pages.
The one problem I'm having with it is that the animation is always
right to left ... the "backwards" key doesn't function as designed.
But when I change the initial offscreen left assignement of toPage
based on the value of backwards:
toPage.style.left = backwards ? "-100%" : "100%";
the address bar pops back into view on a backwards transition and
doesn't disappear. What's the trick to make it scroll away (or better
yet not appear at all)?
On May 20, 12:49 am, laurenty <[EMAIL PROTECTED]> wrote:
> I used the new transition property to create a sliding button (like
> the one on the native ui)
> The only place I could test it for now was Safari 3.1 desktop, but I'm
> sure it will work the same on the iPhone.
>
> seehttp://laurenty.blogspot.com/2008/05/iphone-webapp-buttons.html
>
> On May 16, 12:59 pm, dgouldin <[EMAIL PROTECTED]> wrote:
>
> > Has anybody tried to use the webkit specific css properties for
> > transitions instead of js? I've currently disabled the page slides
> > because they're too choppy on an actual iPhone. I tried getting -
> > webkit-transition to work, and though my proof of concept pages worked
> > fine, I was unable to get it to work in iui.
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
