CODEWITHSUNDEEP
jquery-mobile
newpc100
newpc100

Reputation: 96

New JQuery Mobile Version Affecting Page Transition?

I have the following code:

<div data-role="page" id="Page1" >

   <!-- Footer here -->
      <div data-role="footer" data-position="fixed" data-id="id-footer1">
         <div data-role="navbar">
            <ul>
               <li><a href="#Page1" class="ui-btn-active ui-state-persist">Page1</a></li>
               <li><a href="#Page2" data-transition="pop">Page2</a></li>
            </ul>
         </div>
      </div><!-- /footer -->
</div><!-- /page -->

<div data-role="page" id="Page2" >

   <!-- Footer here -->
      <div data-role="footer" data-position="fixed" data-id="id-footer1">
         <div data-role="navbar">
            <ul>
               <li><a href="#Page1" >Page1</a></li>
               <li><a href="#Page2" data-transition="pop"class="ui-btn-active ui-state-persist">Page2</a></li>
            </ul>
         </div>
      </div><!-- /footer -->
   </div><!-- /page -->

The above codes will work if I use the following scripts. That is, Page 1 will have the Slide effect and Page 2 the Pop effect.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

However, when I used the following, the slide effect and pop effect are gone.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

Seems like the new JQM version has affected the page transition or am I missing something? Can anybody confirm?

Thanks.

Upvotes: 1

Views: 631

Answers (1)

daniel.auener
daniel.auener

Reputation: 1294

Read the transitions section in the announcement of 1.1.0:

Unfortunately, after a ton of work, we’ve determined that it’s not possible to dumb down page transitions enough to get acceptable performance in Android 2.x, even on a newer device like a Nexus S running 2.3. After a lot of deliberation, we’ve decided to use a feature test for 3D transforms to target transitions: if a browser passes, it will see the full range of transitions. By default, if a browser fails this 3D test, they will fall back to a fade transition, regardless of the transition specified. All Android 1.x-2.x devices fail this test but Android 3.x and 4.x pass. The fallback behavior for each transition is completely configurable if you want to change this behavior.

If your testing browser doesn't support 3D transforms you will get a fade transition.

Upvotes: 1

Related Questions