Aide à la programmation, réponses aux questions / Jquery / Phonegap / La transition de diapositive mobile jquery ne fonctionne pas correctement lors du premier appel - jquery, jquery-mobile, cordova

La transition des diapositives mobiles Phonegap / jQuery ne fonctionne pas correctement au premier appel

J'ai un problème visuel gênant. Je veux une belle transition lors du changement de page sur une application. Malheureusement, la première fois que je passe à une autre page, au lieu de faire glisser la page actuelle vers l'extérieur et la nouvelle page vers l'intérieur, la page actuelle est immédiatement remplacée par la nouvelle page, puis glisse vers l'extérieur. Lorsque la première page est hors de vue, la nouvelle page s'affiche. Cependant, la deuxième fois, cela fonctionne comme un charme!

Ceci fonctionne sur iPhone avec jQuery Mobile + PhoneGap

J'ai fait une vidéo pour aider à clarifier le problème: http://www.youtube.com/watch?v=Ybvzh_wTnSE

    <body style="background-color: #000;">
<div id="container" style="display:none;">
<div id="side-menu" style="display:none;">
<div id="header_top"></div>
<a href="#dives" onclick="showdives();"><div id="header_dives" class="selected"></div></a>
<div id="header_spacer1"></div>
<a href="#explore" onclick="showexplore();"><div id="header_explore"></div></a>
<div id="header_spacer2"></div>
<a href="#search" onclick="showsearch();"><div id="header_search"></div></a>
<div id="header_spacer3"></div>
<a href="#settings" onclick="showsettings();"><div id="header_settings"></div></a>
<div id="header_bottom"></div>
</div>
<div id="slide_mask">
<!-- START of LOGIN page -->
<div data-role="page" id="login">
<div id="home_frame">
<div id="home_logo"></div>
<div id="home_fblogin" onclick="login()"></div>
<div class="home_login">
<p>Email: <input type="text"  name="user[email]" size="30"/></p>
<p>Password: <input type="password"  name="user[password]" size="30"/></p>
<button onclick="show_page_home();">LOGIN</button>
</div>
</div>
</div>
<!-- END of LOGIN page -->

<!-- START of LOGIN page -->
<div data-role="page" id="dives" class="right_pane">
<p>My dives !</p>
</div><!-- /content -->
<div data-role="page" id="explore" class="hidden right_pane">
<p>My explore !</p>
</div><!-- /content -->
<div data-role="page" id="search" class="hidden right_pane">
<p>My search !</p>
</div><!-- /content -->
<div data-role="page" id="settings" class="hidden right_pane">
<p>My settings !</p>
<button onclick="logout_db();">logout</button>
</div><!-- /content -->
<!-- END of LOGIN page -->
</div>
</div>
<div id="log"></div>
<div id="data"></div>
</body>

Et le CSS pertinent:

    body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat;
-webkit-user-select: none;  /* prevent copy paste for all elements */
}
#container { width:320px; height:460px; overflow: hidden;}

input{ -webkit-user-select: text;  /* enable copy paste for elements with this class */}
a {-webkit-user-select: none;  /* prevent copy paste for all elements */}
span {-webkit-user-select: none;  /* prevent copy paste for all elements */}

#side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block;
overflow: hidden; top: 0px; left: 0px; }
#header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;}
#header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;}
#header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;}
#header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;}
#header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;}
#header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_search.selected{background: url(../img/header/search_selected.png) no-repeat;}
#header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;}
#header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;}
#header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;}

.hidden {display: none;}
.right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;}
#slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px;  width: 263.5px; height: 460px; top: 0;}

et le peu de JS:

    ///////////////////////////////////
//MENU MECHANICS
///////////////////////////////////

function showdives(){
$("#side-menu .selected").removeClass("selected");
$("#header_dives").addClass("selected");
}

function showexplore(){
$("#side-menu .selected").removeClass("selected");
$("#header_explore").addClass("selected");
}
function showsearch(){
$("#side-menu .selected").removeClass("selected");
$("#header_search").addClass("selected");
}
function showsettings(){
$("#side-menu .selected").removeClass("selected");
$("#header_settings").addClass("selected");
}

Les méthodes onclick ajoutent / suppriment uniquement la classe "sélectionnée" dans / des éléments de menu.

Réponses:

3 pour la réponse № 1

Je pense que les gens parlent de "scintillement",vous obtiendrez donc de meilleurs résultats lorsque vous recherchez cela. Après avoir regardé autour de vous, il semble que votre problème soit courant sur Android et peut être résolu en ajoutant le CSS suivant:

.ui-page {
-webkit-backface-visibility: hidden;
}

Voici quelques références:

3 pour la réponse № 2

Mes amis et moi utilisons JQuery 1.2.

La façon de résoudre ce problème était de mettre data-transition = "none". Peut-être que cela ne peut pas apparaître mobile

style autant, mais fonctionne et supprime le problème de scintillement.

J'espère que cette aide

0 pour la réponse № 3

J'ai eu le même problème, mais pire encore, quandencapsulation d'une application mobile Jquery dans Phonegap. Non seulement les transitions de page scintillaient, mais l'interface utilisateur était complètement cassée. J'ai utilisé Jquery 1.8 et Jquery mobile 1.2 dans cette application.

J'ai essayé la plupart des solutions suggérées ici sur SO, mais rien n'a fonctionné. Puis j'ai trouvé ce solution par Piotr Walczyszyn, et tout a fonctionné comme un rêve! Fortement recommandé pour quiconque utilise Jquery mobile et Phonegap ensemble.