Question

此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移动javascript文件，并在changepage函数中看到它名为$ .mobile._maybeDegradeTransition。此函数检查浏览器是否支持csstransform3d。 Chrome会向此返回false。当我将代码更改为始终返回true时，Chrome就会进行转换。

Answer 1

根据JQuery Mobile网站：

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

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

jQuery移动页面转换总是淡出

1 个答案: