Question

JQM 1.3.1 - JQ 1.9.1 - Android 4.1.1上的Chrome

我有一个主页，其中列出了50个指向另一个页面的项目。

当我使用幻灯片过渡时，第一个滑出和向后滑动是完美的。但是第二个和之后的所有都有点不同。从列表到事件页面时，它看起来更像是重叠。此外，过渡似乎更快一点。

我删除了所有的CSS以确保它们都没有与转换进行交互。

以下是代码（可在此处找到：http://test.wouf.it/slideandroid/）：

<!DOCTYPE html>
<html>
<head>
<title>slide</title>
<meta charset='utf-8'/>
<meta name="viewport" content='user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'/>
<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script>
  $(document).one("mobileinit", function(event) {
  $.mobile.defaultPageTransition = "slide";
  });
</script>
 <script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js'></script>
 </head>
 <body>
  <div data-role='page' id='page1' data-theme="c">
    <div data-role='header' data-position='fixed' data-theme="a">
      <h1>example</h1>
    </div>
    <div style='background-color:#ddd;' data-role="content">
      <ul style="width:100%;">
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      <li><a href="#event">event page</a></li>
      </ul>
    </div>
    <div data-role='footer' data-position='bottom' data-theme="a" data-tap-toggle="false">
      <div data-role='navbar' id='kms'  >
        <ul id="dist">
          <li><a href='#'>Loren</a></li>
          <li><a href='#'>Ipsum</a></li>
          <li><a href='#'>Dolor</a></li>
          <li><a href='#'>Sit</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-role="page" id="event" data-theme="c" style="background:black;">
    <div data-role="header" data-theme='a'>
      <a class="ui-btn-left ret" data-icon="arrow-l" id="bhome" href="#page1" data-direction="reverse" data-iconshadow="false" >Back</a>
      <h1></h1>
    </div>
    <div id='ecnt' data-role="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum trices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci c nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. s arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. 
    </div>
  </div>
  </body>
 </html>

如果我查看firebug，事件div的属性在第一次调用后会改变：

之前：

<div id="container" class="ui-mobile-viewport ui-overlay-c">
<div id="page1" class="ui-page ui-body-c ui-page-header-fixed iscroll-page ui-page-active" style="background: none repeat scroll 0% 0% black; padding-top: 44px; min-height: 618px;" data-theme="c" data-role="page" data-url="page1" tabindex="0">
<div id="event" style="background:black;" data-theme="c" data-role="page" data-url="event">
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">

之后：

<div id="container" class="ui-mobile-viewport ui-overlay-c">
<div id="page1" class="ui-page ui-body-c ui-page-header-fixed iscroll-page ui-page-active" style="background: none repeat scroll 0% 0% black; padding-top: 44px; min-height: 618px;" data-theme="c" data-role="page" data-url="page1" tabindex="0">
<div id="event" style="background: none repeat scroll 0% 0% black; min-height: 662px;" data-theme="c" data-role="page" data-url="event" tabindex="0" class="ui-page ui-body-c">
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">

这可能是改变的原因吗？

Answer 1

由此线索提供dantabel：https://github.com/jquery/jquery-mobile/issues/5764 这是答案！交换这部分jquery 1.3.2源代码

// line 3674 - jquery.mobile-1.3.2.js
startOut = function() {
    // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
    if ( !sequential ) {
        doneOut();
    }
    else {
        $from.animationComplete( doneOut );
    }

    // Set the from page's height and start it transitioning out
    // Note: setting an explicit height helps eliminate tiling in the transitions
    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );
},

有了这个：

startOut = function() {
    if ( !sequential && reverse) {
        doneOut();
    } else if(sequential) {
        $from.animationComplete( doneOut );
    }

    $from
        .height( screenHeight + $.mobile.window.scrollTop() )
        .addClass( name + " out" + reverseClass );

    if ( !sequential && !reverse) {
        doneOut();
    }
},

然后它就像一个魅力！（至少在iOS 7上）

我想这个bug将在1.4中修复，我们会看到： - ）

幻灯片转换中的重叠Jquery Mobile 1.3.1

1 个答案: