淡出时在我的 iPad 应用程序中闪烁答案

【问题标题】：Flickering in my iPad app while fading淡出时在我的 iPad 应用程序中闪烁
【发布时间】：2011-09-29 11:40:45
【问题描述】：

我正在使用 Phonegap、jQuery 等构建 iPad 应用程序/游戏。该应用程序是由部分构建的，每个部分都包含几页。当我点击按钮时，当前部分或页面淡出，新的部分或页面淡入。褪色是在 CSS 中完成的，以获得更好的性能。

在一页上我有文本框。当使用此文本框并单击按钮转到下一部分时，屏幕在消失时闪烁。当我从一个页面淡入另一个页面时，它不会闪烁。

还有一个400 x 400的背景动画。

按钮点击：

淡出旧Div
隐藏旧的 Div
将不透明度新 Div 设置为 0
取消隐藏新的 Div
淡入新的 Div

结构是这样的：

<div id="wrapper">
    <div id="section1">
        <span id="page1"><button>Go to page 2</button></span>
        <span id="page2">
                <button>Go to page 3</button>
                <input type="text"/>
        </span>
        <span id="page3"><button>Go to section 2</button></span>
    </div>
    <div id="section2">
        <span id="page1"><button>Go to page 2</button></span>
        <span id="page2"><button>Go to page 3</button></span>
        <span id="page3"><button>Go to section ..</button></span>
    </div>
</div>

【问题讨论】：

标签： jquery css ipad webkit cordova

【解决方案1】：

尝试将此添加到所有使用动画的对象：

-webkit-backface-visibility: hidden;

这决定了一个元素在不面向屏幕时是否可见并且应该可以解决您的问题。

【讨论】：

【解决方案2】：

backface-visibility 属性与 3D 变换有关。使用 3D 变换，您可以设法旋转元素，以便我们认为元素的“正面”不再面向屏幕。例如，这会将一个元素从屏幕上翻转：

CSS

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform:    rotateY(180deg);
  -ms-transform:     rotateY(180deg);
}

它看起来就像你用抹刀把它捡起来然后像煎饼一样翻过来。这是因为背面可见性的默认设置是可见的。您可以将其隐藏起来，而不是可见。

CSS

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Demo

【讨论】：