page transition dosn't work using (jquery mobile 1.3.0 and phonegap 2.3)

Question

page transition dosn't work using (jquery mobile 1.3.0 and phonegap 2.3) i am building an application with jquery mobile 1.3 and phonegap 2.3 and i have button like

    <a href="#page2" data-role="button" data-theme="e" data-transition="slide">Start</a>

with a data-transition="slide" i build it for android and the transition didnt work i tried

    .ui-page {-webkit-backface-visibility:hidden}

but it didnt work to .

any help ?!!!

NOTE : it work good on the browser, but after i build it with phonegap it goes to the second page but the transition isnt a "slide" it just flashes then the second page show !!

Answer 1

I did a sample app with 2 pages in JSfiddle and it worked without any issues. You can check it out yourself.

I think you have messed up the Page ID with Content ID. The tag you give in anchor tag should be Page's ID not content div's ID.

Here is the working sample.

<!-- Start of first page -->
<div data-role="page" id="page1">
    <div data-role="header">
            <h1>Page1</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm first in the source order so I'm shown as the page.</p> <a href="#page2" data-role="button" data-transition="slide">Page2</a>

    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="page2">
    <div data-role="header">
            <h1>Page2</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>  <a href="#page1" data-role="button">Back to Page1</a>

    </div>
    <!-- /content -->
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->