定义页面更改之间的返回转换答案

【问题标题】：Defining a return-transition between page changes定义页面更改之间的返回转换
【发布时间】：2012-07-30 23:18:09
【问题描述】：

我正在使用 jQueryMobile 的 $.mobile.changePage(...) 方法在我的项目中切换到不同的页面。

$.mobile.changePage("#foo", {
 transition:"slide"
});

当我运行该方法时，过渡效果很好，但是当我点击浏览器的返回按钮时，我看不到反向过渡。

我尝试了http://jquerymobile.com/test/docs/api/methods.html 中描述的一些参数，但没有运气。

特别是设置reverse:true在前进到目标页面时只是反转了过渡，但是当我点击后退按钮时仍然没有过渡。

更新： 似乎看到 data-rel="back" 可以解决通过 <a>-tag BUT 定义的“原始链接”我需要什么是调用 $.mobile.changePage() 函数时的 JavaScript 等效项。

【问题讨论】：

您使用什么浏览器进行测试？

标签： javascript jquery-mobile

【解决方案1】：

看看这个页面，http://jsfiddle.net/nachiket/mDTK2/show/light/
和我一起工作得很好。

单击（第 1 页）显示从左到右的过渡，而后退按钮（第 2 页）显示从右到左的过渡。

来源：http://jsfiddle.net/nachiket/mDTK2/
如果它不能正常工作，请分享您的浏览和其他详细信息。
如果示例工作正常，但不是您的代码，请制作一个突出您的问题的 jsfiddle，以便我可以检查和更新代码/答案。

【讨论】：

是的，创建一个简单的 jQM 项目可以正常工作。看起来这种行为只出现在我的应用程序中。不幸的是，源代码是保密的。什么是调试这个的好习惯？
@valmar 您应该为 Safari 启用调试控制台：osxdaily.com/2012/05/07/enable-safari-debug-console-ios

【解决方案2】：

对于您想要反向转换的链接，您可以使用data-direction="reverse" 和data-rel="back"

例子：

<div data-role="page" >
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#page2" data-role="button" data-transition="slide">Page 2</a>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header"><h3> Header </h3> </div>
    <div data-role="content" >    
        <a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
    </div>
</div>

jsFiddle：

http://jsfiddle.net/GEDcF/

文档：

http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html

更新

来自您的评论

"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"

文档：

http://jquerymobile.com/demos/1.1.1/docs/api/methods.html

引用：

Properties:
     reverse (boolean,  default:    false) Decides what direction the transition will run when showing the page.

【讨论】：

是的，但是如何使用 JavaScript 函数 $.mobile.changePage() 做到这一点？
不，那是错误的。正如我在原始问题中已经说过的那样，使用reverse=true 只会告诉 jQM 在从一页向前移动到另一页时使用反向转换。返回上一页时不会影响过渡。

【解决方案3】：

找到了。

我们的一位开发人员在全球范围内关闭了所有返回转换，所以难怪它不起作用。

这是他用的。删除那条线就可以了。

$.mobile.changePage.defaults.transition = "none";

【讨论】：