2

我正在使用 jQuery Mobile。对于某些链接 - 但不是全部，我在我的标记中使用以下页面转换代码：

data-transition="slide"

这运行良好，但我想禁用 Android 设备中的幻灯片动画，同时仍然允许 iOS 等中的幻灯片动画...

我知道我可以使用如下代码定位 Android：

$(document).bind("mobileinit", function() {

    if (/Android/i.test(navigator.userAgent) ) {
        $.mobile.defaultPageTransition = "none";
    }

});

虽然这确实删除了默认转换，但我的幻灯片转换不是默认转换，它是我在标记中专门指定的转换。

有谁知道如何在特定设备中禁用/覆盖这样的特定幻灯片过渡？

谢谢！

4

2 回答 2

2

完美的解决方案不存在，因为 jQM 开发人员没有实现完美的转换关闭解决方案。

它仍然可以这样做：

解决方案 1

$(document).bind("mobileinit", function() {
    if (/Android/i.test(navigator.userAgent) ) {
        $.mobile.ajaxEnabled = false;
    }
});

这将防止使用 ajax 加载页面，从而防止页面转换。当然，如果您仍然需要使用 ajax 加载页面，这是一个很好的解决方案。

解决方案 2

这个解决方案会容易得多。我正在使用 jQuery Mobile 1.3.1。为此，相信我，这很重要。基本上您需要手动更改 jQuery Mobile js 文件，因此请使用未压缩的文件。

转到第 3788 行，您将在此处看到此功能：

// 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;
};

改变它，使它看起来像这样：

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

你可以在这里测试它：http: //www.fajrunt.org/transition-test/

如果您使用的是较旧的 jQM 版本，请告诉我是哪一个，我会为您修改它。您还可以从我的示例下载修改后的 jQM js 文件。不要忘记再次压缩它。

于 2013-05-22T16:59:33.293 回答
0

我相信同样可以在 1.3.0 中实现，例如：

$(document).bind("mobileinit", function() {

    if (/Android 2.2/i.test(navigator.userAgent) ) {
        console.log("Android 2.2 detected - changing default transition fallback behaviour to 'none'");
        //$.mobile.defaultPageTransition = "none";
        $.mobile.transitionFallbacks.slidefade="none";        
        $.mobile.transitionFallbacks.flip = "none";
        $.mobile.transitionFallbacks.flow = "none";
        $.mobile.transitionFallbacks.pop = "none";
        $.mobile.transitionFallbacks.slide = "none";
        $.mobile.transitionFallbacks.slidedown = "none";
        $.mobile.transitionFallbacks.slidefade = "none";
        $.mobile.transitionFallbacks.slideup = "none";
        $.mobile.transitionFallbacks.turn = "none";
    }

});
于 2013-06-07T09:31:10.790 回答