jQuery 移动页面过渡总是淡出答案

【问题标题】：jQuery mobile page transition is always fadejQuery 移动页面过渡总是淡出
【发布时间】：2012-10-19 12:36:54
【问题描述】：

这个来自 jQuery 的页面转换示例适用于 Chrome http://jquerymobile.com/demos/1.0a4.1/docs/pages/#docs-transitions.html

但是当我用这段代码自己尝试时，它总是使用淡入淡出效果。在 Firefox 中它确实有效。使用 phonegap 构建它时，它在 iOS 上不起作用，在 Android 上也不起作用。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/jquery/jqueryMobile/jquery.mobile-1.2.0.css" />
    <script src="js/jquery/jquery-1.8.2.js"></script>
    <script src="js/jquery/jqueryMobile/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="page1" data-role="page">
        <a id="my_link" href="#page2" data-role="button" data-transition="slide">
            click me
        </a>
    </div>
    <div id="page2" data-role="page">
        <div>
            page2
        </div>
    </div>

</body>

我查看了 jquery mobile javascript 文件，发现它在 changepage 函数中名为 $.mobile._maybeDegradeTransition。此函数检查浏览器是否支持 csstransform3d。 Chrome 对此返回 false。当我将代码更改为始终返回 true 时，Chrome 只会进行转换。

【问题讨论】：

标签： jquery cordova jquery-mobile

【解决方案1】：

根据 JQuery Mobile 网站：

只看到淡入淡出过渡？要查看所有过渡类型，您必须使用支持 3D 变换的浏览器。默认情况下，缺乏 3D 支持的设备（例如 Android 2.x）将回退到所有过渡类型的“淡入淡出”。此行为是可配置的（见下文）。

来源：http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-transitions.html

【讨论】：