如何在某些设备的某些链接上禁用“幻灯片”页面转换？仅使用-defaultPageTransition是不够的

Question

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

data-transition="slide"

这个效果很好，但我想在Android设备中禁用幻灯片动画，同时仍然允许iOS等幻灯片动画......

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

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

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

});

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

有没有人知道如何在特定设备中禁用/覆盖特定幻灯片转换？

谢谢！

Answer 1

完美的解决方案不存在，因为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文件。别忘了再压缩它。

Answer 2

我相信同样可以在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";
    }

});