Javascript webkitTransform within a for loop

Question

Hey,

I've come across a strange problem whilst trying to mimic the native iPhone page transitions (slide current page out and new page in).

Here's my current code (extracted from a larger file, with no errors when debugging, so code logic doesn't seem to be the problem):

Notes:
A new page is created when a link on the current page is clicked. This bumps up the pageCounter variable by one (pageCounter++).
This new page is created with a webkit transition of the screenWidth in pixels (so it's created offscreen to the right).
The new page is assigned an id of 'page1', 'page2', 'page3', etc., depending on how deep the links are (i.e. page 0 is the first page, page1 the second. A link on page1 will lead to page2, etc.).
Each page is pushed into the pageArray, so pageArray[0] == page0, pageArray[1] = page1, and so on.
The variable 'w' is the screen width.
I reverse the pageArray in order to get the multiplier, so the pages stay in a horizontal-nav-bar style (inline)

    for(var t=0; t < pageArray.length; t++) {   

        var movingPage = document.getElementById('page'+t+'');

        pageArray.reverse();    

        movingPage.style.webkitTransitionDuration = "0.5s";
        movingPage.style.webkitTransitionTimingFunction = 'cubic-bezier(0.25,0.1,0.25,1)';
        movingPage.style.webkitTransform = 'translateX(-'+w*pageArray[t]+'px)';


        pageArray.reverse();
    }

So, the problem is this:
Running the code as it is above causes only the page currently showing to slide left. The new page just appears in place without any transition, almost as if I'd told an element with display='none' to have display='block'.

However, putting an alert into the for loop allows for both the pages (or more!) to animate properly. It doesn't seem to matter where in the loop this alert is placed.

I've tried all I can think of so far (variable names in an array, dynamic variable names, and lots more besides) but the only thing that works is to have a new function with two pages sent to it as params (page0, page1, for example), and have each of those two pages animate with their own element.style methods. Which won't work for more than two pages for obvious reasons.

How can I get both (or all) the pages in the pageArray to animate properly, without using an alert (for obvious user experience issues!)?

Thanks in advance (sorry for the long post)!