Comment désactiver la transition de page «Diapositive» sur certains liens pour certains périphériques? -defaultPageTransition ne suffit pas - Android, JQuery, JQuery-Mobile

Je travaille avec jQuery Mobile. Pour certains liens - mais pas tous, j'utilise le code de transition de page suivant directement dans mon balisage:

data-transition="slide"

Cela fonctionne bien, mais je souhaite désactiver l'animation de diapositive sur les appareils Android, tout en autorisant l'animation de diapositive sur iOS, etc.

Je sais que je peux cibler Android avec un code comme celui-ci:

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

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

});

Et bien que cela supprime la transition par défaut, ma transition de diapositive n'est pas la valeur par défaut, c'est celle que je spécifie spécifiquement dans le balisage.

Quelqu'un sait-il comment désactiver / remplacer une transition de diapositive particulière comme celle-ci sur des appareils particuliers?

Merci!

Réponses:

2 pour la réponse № 1

La solution parfaite n’existe pas parce que les développeurs de jQM n’ont pas implémenté une solution d’arrêt de transition parfaite.

Cela peut encore être fait comme ceci:

Solution 1

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

Cela empêchera le chargement de la page avec un ajax empêchant ainsi les transitions de page. Bien sûr, c'est une solution de lit si vous avez encore besoin de pages à charger avec ajax.

Solution 2

Cette solution sera beaucoup plus simple. J'utilise jQuery Mobile 1.3.1. pour cela, croyez-moi c'est important. Fondamentalement, vous devrez modifier manuellement le fichier js jQuery Mobile afin d'utiliser un fichier non compressé.

Allez à la ligne 3788 et là vous verrez cette fonction:

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

Modifiez-le pour qu'il ressemble à ceci:

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

Vous pouvez le tester ici: http://www.fajrunt.org/transition-test/

Si vous utilisez une ancienne version de jQM, dites-moi laquelle et je la modifierai pour vous. Vous pouvez également télécharger le fichier jQM js modifié à partir de mon exemple. N'oubliez pas de le compresser à nouveau.

---

0 pour la réponse № 2

Je crois que la même chose peut être obtenue comme ceci dans 1.3.0 soit, comme:

$(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";
}

});

---