jQuery Mobile：changepage 幻灯片过渡在桌面上运行良好，但在 Android 设备上运行良好答案

【问题标题】：jQuery Mobile: changepage slide transition working fine on a desktop but not on Android devicesjQuery Mobile：changepage 幻灯片过渡在桌面上运行良好，但在 Android 设备上运行良好
【发布时间】：2012-12-03 07:35:21
【问题描述】：

$('div.ui-page').live("swipeleft", function () {
    var nextpage = $(this).next('div[data-role="page"]');
    if (nextpage.length > 0) {
        $.mobile.changePage(
            nextpage,
            {transition: "slide"},
            true,
            true
        );
    }else{
        $.mobile.changePage(
            "#page3",
            {   transition: "slide", 
                reverse:true
            }, 
            true, 
            true
        );
    }
});

代码在桌面浏览器和 iOS 上运行良好。但是当我在 Android 设备上运行此代码时，页面会闪烁然后移至下一页。它应该触发幻灯片转换选项，但没有显示幻灯片效果。

我应该如何在 Android 网络应用或移动浏览器上设置幻灯片效果？我已经尝试过$(id).animate 方法，但没有运气。我不知道我应该怎么做才能触发幻灯片效果。

有没有尝试过滑动功能的安卓开发者？谁能告诉我应该怎么做才能调整$.mobile.changePage的幻灯片效果？

【问题讨论】：

你在安卓上使用什么浏览器
浏览器是基本浏览器。铬。
签入 chrome 桌面浏览器。它也将具有相同的效果。
no.. chrome 桌面浏览器触发幻灯片效果.. 但不是在基本 android 移动浏览器上（基本浏览器是 chrome 对吗？）
试试alert(document.body.style.WebkitTransition == '')是否支持3d转场

标签： javascript android jquery cordova jquery-mobile

【解决方案1】：

http://jquerymobile.com/test/docs/pages/page-transitions.html

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

要检查您的 android 是否支持它，请将 sn-p 添加到您的 javascript 中

window.onload = function () {
var b = document.body.style;
if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
    alert('supported');
} else {
    alert('NOT supported')
}

}

【讨论】：

什么..见鬼？？？？？？我在墙上撞了这么久......上帝......谢谢你通知这个......如果我不读这个我会浪费更多时间。

【解决方案2】：

roine 说的是真的。浏览器说它不支持过渡。但是......让我们不同意浏览器，无论如何都要这样做。在 jQuery 移动中更改：

// If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
$.mobile._maybeDegradeTransition = function( transition ) {
        if ( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ) {
            transition = $.mobile.transitionFallbacks[ transition ];
        }

        return transition;
};

到：

$.mobile._maybeDegradeTransition = function( transition ) {
    return transition;
};

然后你就可以了。

但是你要明白浏览器不会无缘无故说不支持。例如，Android 上的浏览器在第一次转换时会失败（不是 Chrome）。

【讨论】：