jQuery Mobile过渡在长页面上停止工作 [英] JQuery Mobile transition stops working on long page

问题描述

从长页面的底部开始运行时，页面过渡不再存在问题.

这是一个jsfiddle: http://jsfiddle.net/7WVHA/7/

如果打开示例并单击黑色导航按钮，则过渡将按预期运行.但是，如果返回长页面，请滚动到底部并再次运行它，过渡将不再发生，并且第二页将立即显示.

任何帮助将不胜感激.

<div data-role="page" id="long">
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>Long Page</h1>
        <a href="#short" data-transition="flip" data-role="button" data-theme="b">DO TRANSITION</a>

    </div>
    <div data-role="content" data-theme="a">
        <div class="box">TEST BOX 1</div>
        <div class="box">TEST BOX 2</div>
        <div class="box">TEST BOX 3</div>
        <div class="box">TEST BOX 4</div>
        <div class="box">TEST BOX 5</div>
        <div class="box">TEST BOX 6</div>
        <div class="box">TEST BOX 7</div>        
    </div>
</div>
<div data-role="page" id="short">
    <div id="gridheader" class="header" data-role="header" data-position="fixed" data-theme="a">
        <h1>Short Page</h1>
        <a href="#long" data-transition="flip" data-role="button" data-theme="b"> Back</a>

    </div>
    <div data-role="content" data-theme="a">
        Short page
    </div>
</div>

解决方案

这是jQuery Mobile在长页面上的默认行为，禁用了过渡动画.

您可以通过滚动到pagebeforechange上的页面顶部来解决此问题.

$(document).on("pagebeforechange", function () {
    window.scrollTo(0, $.mobile.defaultHomeScroll);
});

$.mobile.defaultHomeScroll 是默认情况下，除非根据设备/平台隐藏了网址栏.

演示

I am having an issue with page transitions no longer occuring when run from the bottom of a long page.

Here is a jsfiddle: http://jsfiddle.net/7WVHA/7/

If you open up the example and click on the black navigation button the transition runs as expected. However if you return to the long page, scroll to the bottom and run it again the transition no longer occurs and the second page just appears straight away.

Any help would be greatly appreciated.

<div data-role="page" id="long">
    <div data-role="header" data-position="fixed" data-theme="a">
        <h1>Long Page</h1>
        <a href="#short" data-transition="flip" data-role="button" data-theme="b">DO TRANSITION</a>

    </div>
    <div data-role="content" data-theme="a">
        <div class="box">TEST BOX 1</div>
        <div class="box">TEST BOX 2</div>
        <div class="box">TEST BOX 3</div>
        <div class="box">TEST BOX 4</div>
        <div class="box">TEST BOX 5</div>
        <div class="box">TEST BOX 6</div>
        <div class="box">TEST BOX 7</div>        
    </div>
</div>
<div data-role="page" id="short">
    <div id="gridheader" class="header" data-role="header" data-position="fixed" data-theme="a">
        <h1>Short Page</h1>
        <a href="#long" data-transition="flip" data-role="button" data-theme="b"> Back</a>

    </div>
    <div data-role="content" data-theme="a">
        Short page
    </div>
</div>

解决方案

This is the default behavior of jQuery Mobile on long pages, transition animation is disabled.

You can solve this by scrolling to top of page on pagebeforechange.

$(document).on("pagebeforechange", function () {
    window.scrollTo(0, $.mobile.defaultHomeScroll);
});

$.mobile.defaultHomeScroll is 0 by default, unless url bar is hidden depending on device/platform.

Demo

这篇关于jQuery Mobile过渡在长页面上停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！