Phonegap / jquery移动幻灯片切换第一次调用时不正确 [英] Phonegap / jquery mobile slide transition not workign properly on first call
本文介绍了Phonegap / jquery移动幻灯片切换第一次调用时不正确的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个尴尬的视觉故障。我想要一个很好的过渡，当更改应用程序的页面。
不幸的是，我第一次更改到另一个页面，而不是滑动当前页面和新页面，当前页面立即替换为新页面，然后滑出。当第一页超出视图时，显示新页。
I have an awkward visual glitch. I want a nice transition when changing pages on an app. Unfortunately, the first time I change to another page, instead of sliding the current page out and the new page in, the current page is immediately replaced by the new page and then slides out. When the first page is out of view, the new page is shown. However, the second time around, it works like a charm!
这是运行在iphone上的jQuery Mobile + PhoneGap
This is running on iphone with jQuery Mobile + PhoneGap
我制作了一个视频以帮助澄清问题： http://www.youtube.com/watch?v=Ybvzh_wTnSE
I made a video to help clarify the issue: 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>
和相关的CSS：
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;}
和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");
}
onclick方法只向/菜单项。
The onclick methods only add/remove the "selected" class to/from the menu items.
推荐答案
我相信人们将这称为闪烁，所以当您搜索那。环顾四周，看起来你的问题在Android上是常见的，可以通过添加以下CSS解决：
I believe people refer to this as "flickering", so you'll have better results when you search for that. After looking around, it looks like your problem is common on android and can be solved by adding the following CSS:
.ui-page {
-webkit-backface-visibility: hidden;
}
以下是几个参考：
- http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
- 在页面之间导航时闪烁
- < a href =https://forum.jquery.com/topic/performance-of-jquery-mobile-on-android-2-2-and-2-3-flickering =nofollow> https：// forum.jquery.com/topic/performance-of-jquery-mobile-on-android-2-2-and-2-3-flickering
- http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
- Flickering when navigating between pages
- https://forum.jquery.com/topic/performance-of-jquery-mobile-on-android-2-2-and-2-3-flickering
这篇关于Phonegap / jquery移动幻灯片切换第一次调用时不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
