可能重复:
iphone webkit css动画导致闪烁
出于某种原因,在我的webkit-transform属性动画发生之前,有轻微的闪烁.这是我在做的事情:
CSS:
#element {
-webkit-transition: -webkit-transform 500ms;
}
JavaScript的:
$("#element").css("-webkit-transform", "translateX(" + value + "px)");
在转换发生之前,有一个闪烁.知道为什么会这样,以及我如何解决问题？
谢谢!
更新:这只发生在Safari中.虽然动画确实有效,但在Chrome中却不会发生这种情况.
我有一个非常简单的演示工作,它使用Webkit转换和转换来实现'面板'(div)之间的平滑水平滚动.
我想要走这条路线而不是Javascript驱动系统的原因是它适用于iPad和Javascript性能相当差,但css转换和过渡是如丝绸一样平滑.可悲的是,我用我的演示在iPad上闪烁了很多.
你需要safari或iPad才能看到它的实际效果.我从来没有在转换和转换的任何演示中看到过这种情况,所以我希望这是可以修复的.
无论如何这里的代码是为了这个东西....
HTML看起来像这样.
<html>
<head>
<title>Swipe Demo</title>
<link href="test.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="swiping.js"></script>
</head>
<body>
<div id="wrapper">
<div class='panel one'>
<h1>This is panel 1</h1>
</div>
<div class='panel two'>
<h1>This is panel 2</h1>
</div>
<div class='panel three'>
<h1>This is panel 3</h1>
</div>
<div class='panel four'>
<h1>This is panel 4</h1>
</div>
</div>
</body>
</html>
CSS看起来像这样
body,
html
{
padding: 0;
margin: 0;
background: #000;
} …