第一次通话时，Phonegap / jquery移动幻灯片转换无法正常工作

我有一个尴尬的视觉故障。 在应用程序上更改页面时，我希望有一个很好的转换。 不幸的是，当我第一次切换到另一个页面时，当前页面立即被新页面替换而不是滑动当前页面，然后滑出。 当第一页不在视图中时，将显示新页面。 然而，第二次，它就像一个魅力！

这是在iphone上使用jQuery Mobile + PhoneGap运行的

我制作了一个video来帮助澄清问题： http ： //www.youtube.com/watch？v = Ybvzh_wTnSE

 
 
 
 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
 
Email: 
 
Password: 
 LOGIN 
 
 
   
 
My dives !
 
 
 
My explore !
 
 
 
My search !
 
 
 
My settings !
 logout 
  
 
 
 
  

和相关的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方法仅向菜单项添加/删除“selected”类。

Answer 1

我相信人们称之为“闪烁”，所以当你搜索它时你会得到更好的结果。 环顾四周后，看起来您的问题在Android上很常见，可以通过添加以下CSS来解决：

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

以下是一些参考：

• http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
• 在页面之间导航时闪烁
• https://forum.jquery.com/topic/performance-of-jquery-mobile-on-android-2-2-and-2-3-flickering

Answer 2

我和我的朋友正在使用JQuery 1.2。

解决这个问题的方法是将data-transition =“none”。 也许这不会出现移动

风格那么多，但工作和删除闪烁的问题。

希望这有帮助。

Answer 3

我有同样的问题，但更糟糕的是，在Phonegap中包装Jquery移动应用程序时。 不仅页面转换闪烁，而且UI完全被破坏。 我在这个应用程序中使用了Jquery 1.8和Jquery mobile 1.2。

我已经尝试过在这里提出的大多数解决方案，但没有任何效果。 然后我找到了Piotr Walczyszyn的解决方案，一切都像梦一样！ 强烈建议任何使用Jquery mobile和Phonegap的人。