jQuery Mobile过渡在长页面上停止工作

如果打开示例并单击黑色导航按钮，则过渡将按预期运行.但是，如果返回长页面，请滚动到底部并再次运行它，过渡将不再发生，并且第二页将立即显示.任何帮助将不胜感激.<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过渡在长页面上停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！