小编Emp*_*eol的帖子

有没有办法在Mobile Safari上强制渲染/更新所有页面元素(甚至是屏幕外的元素)？

我正在使用PhoneGap构建应用程序,并且在尝试通过JS在屏幕外"存储"的DOM元素中更新数字时遇到问题.该元素位于HTML中,但在屏幕外定位,直到按下按钮为止.当我按下按钮显示数字时,元素将重新出现.

我注意到Mobile Safari喜欢渲染页面元素(甚至元素的部分),因为它们在屏幕上可见.例如,您可以放大图像,它只会渲染可见的部分,如果您滚动其他不可见的部分,它现在将开始渲染(这需要时间).

我只是用新字符串(数字)替换<span>的内容,但如果<span>在屏幕外,它似乎不会更新,直到我在屏幕上调用它,然后需要额外的时间来更新.

是否有任何修复/解决方法,或者我将来是否应尝试设计？我感觉很奇怪,我无法动态更改屏幕外的元素,并在需要时将它们拉回屏幕上...

HTML:

<div class="menu_container" id="menu_menu">    
<p id="hit_pct"><span class="gold">100</span> Hit %</p>
</div><!-- /#menu_menu -->

menu_menu通过定位位于屏幕外.然后按下按钮滑入.当menu_menu尝试滑入时,它会突然显示,因为span元素最初不会出现.然后缓慢渲染并完成幻灯片动画.

我试过不使用滑动动画,结果保持不变.元素的渲染速度不够快,因此整个容器不会在合理的时间内出现.

更新元素的JavaScript:

if(aTilesHit == 0){
   pct = 100;
}else{
   pct = Math.round((abTilesHit/aTilesHit)*100);
}
x$('#hit_pct').inner('<span class="gold">'+pct+'</span> Hit %');

打开菜单的JavaScript:

animationsOn = false; //Halts the animations that will be behind the menu
if(x$('.menu_button').hasClass('active')){
   close_menus();
}else{
   x$('#ingameMenus').css({'left':0}); //Positions the menu on screen
   x$('.menu_container').removeClass('hidden'); //.hidden positions the element offscreen. It does NOT add display=hidden
   x$('.menu_button').addClass('active');
}

谢谢,乔丹

注意:这不会发生在Android浏览器上,因此我觉得它与Mobile Safari处理页面呈现的方式直接相关.

假设我们有一个应用程序，其中包含比赛日程、球员、球队等部分。您将如何构建您的应用程序/功能状态？

我最初的想法是将它们分解为功能状态/模块：

app/\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 games/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 store/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 games.module.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 players/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 store/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 players.module.ts\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 teams/\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 store/\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 teams.module.ts\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 app.module.ts\n

每个功能负责每种类型数据（游戏、球员、球队）的 CRUD 方法。

但就游戏而言，您需要列出哪些球队参加过比赛...并且您可能只在游戏状态中存储对每个球队的引用：

games: {\n  game1Id: {\n    home: team1Id,\n    away: team2Id,\n  }\n  ...\n}\n

类似地，对于查看球队，您将希望查看与球队关联的球员...并且，可能只存储对每个球队的playerIds的引用。

这些状态/数据中的每一个是否真的应该处于全局状态而不是每个功能模块可以从“自上而下”方法中选择它们的功能状态？功能模块结构是否有意义？

或者“跨越”功能模块/状态是否可以接受？

或者还有其他我没有考虑过的方法？

阅读下面的最终编辑!

是否可以使用CSS3动画而不在帧之间补间动画？

例如,我有一个图像,我有两个角色动画精灵.它们的间距均匀为50px.当我使用下面的动画时,我仍然得到一个补间(尽管非常快的补间,所以它看起来像闪烁).

#ball .animated{
        -webkit-animation-name: animate;
        -webkit-animation-duration: .5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-timing-function: linear;}
@-webkit-keyframes animate{
        0%{-webkit-transform: translate3d(0,0,0);}
        49%{-webkit-transform: translate3d(0,0,0);}

        50%{-webkit-transform: translate3d(-50px,0,0);}
        100%{-webkit-transform: translate3d(-50px,0,0);}

因此,基于上述情况,精灵帧应保持在图像的第一部分(x = 0px)持续时间的前0-49%,然后跳转到图像的第二部分(x = -50px)为50-100%.但是,1%的差异仍然足以在视觉上看到从0到-50px的补间.

思考？

编辑:

-webkit-animation-timing-function: cubic-bezier(1,0,1,0);

上面似乎有点理顺了一段时间,但过了一会儿,它又回到了闪烁状态.

编辑:我没有意识到你可以使用百分比的小数.将间隙从1%缩小到0.1%会产生更快的补间,这几乎是不可见的(-webkit-animation-duration:<1s;)

0%{-webkit-transform: translate3d(0,0,0);}
49.9%{-webkit-transform: translate3d(0,0,0);}

50%{-webkit-transform: translate3d(-50px,0,0);}
100%{-webkit-transform: translate3d(-50px,0,0);}

最终编辑!: 好的,所以从我发现的web-kit动画百分比将接受小数到百万分之一(即0.0001).在相对较快的动画计时器上将导致瞬时翻译.我猜想有点黑客攻击,但它确实可以解决问题.

例:

@-webkit-keyframes sprite {
 0% {
   -webkit-transform: translate3d(0,0,0);
 }
 50% {
   -webkit-transform: translate3d(0,0,0);
 }
 50.0001%{
   -webkit-transform: translate3d(-50px,0,0);
 }
 100%{
   -webkit-transform: translate3d(-50px,0,0);
 }
}

上面的例子是一个100px的图像(图像上的每个sprite是50px宽),在一个容器div中,width: 50px并且overflow:hidden每次只显示一个精灵.

注意:我使用的是translate3d,因为它在移动浏览器中是硬件加速的,其中translateX,translateY,translateZ尚未加速硬件.