2

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>

如果我查看萤火虫，事件 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">

这可能是改变的原因吗？

4

1 回答 1

0

由 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 上）

我想这个错误将在 1.4 中修复，我们会看到:-)

于 2013-12-17T09:16:22.223 回答