search

oulan / iui

Automatically exported from code.google.com/p/iui
MIT License
0 stars 0 forks source link

Added ability to transition in 'Y' direction using CSS transitions #194

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
A quick way to allow for sliding in the Y direction using CSS transitions. 
Modified slide2() and 
made slide3()

function slide3(fromPage, toPage, backwards, cb)
{
    toPage.style.webkitTransitionDuration = '0ms'; // Turn off transitions to set toPage start 
offset
    // fromStart is always 0% and toEnd is always 0%
    // iPhone won't take % width on toPage
    var toStart = 'translateY(' + (backwards ? '-' : '') + window.innerHeight + 'px)';
    var fromEnd = 'translateY(' + (backwards ? '100%' : '-100%') + ')';
    toPage.style.webkitTransform = toStart;
    toPage.setAttribute("selected", "true");
    toPage.style.webkitTransitionDuration = '';   // Turn transitions back on
    function startTrans()
    {
        fromPage.style.webkitTransform = fromEnd;
        toPage.style.webkitTransform = 'translateY(0%)'; //toEnd
    }
    fromPage.addEventListener('webkitTransitionEnd', cb, false);
    setTimeout(startTrans, 0);
}

Original issue reported on code.google.com by jye...@gmail.com on 10 Nov 2009 at 11:40