Question

我正在使用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>

Answer 1

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

-webkit-backface-visibility: hidden;

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

Answer 2

背面可见性属性与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

在褪色时我的iPad应用程序闪烁

2 个答案: