3

我偶然发现了针对我的问题的修复程序——而且我不喜欢应用我不理解的修复程序。

<ul>
  <li><img src="something.jpg" /></li>
  <li><img src="somethingElse.jpg" /></li>
  [+12 more <li>'s]
</ul>

我认为相关的 css 样式的简要说明是：

ul {
  position: absolute;
  list-style-type: none;
  top: 0;
  left: 0;
}
li {
  position: relative;
  height: 900px;
  width: 500px;
  float: left;
}
img {
  display: block;
  margin: 0 auto;
}

问题：当应用执行转换以向左移动整个图像集的转换时，即：

ul {
  left: -3000px;
}

它在除 ios 5.1 之外的任何地方都能正常工作，偶尔也能工作，但更常见的是，它最初执行转换，然后恢复显示它“成功”设置的最后一个图像（例如第一张图像，或转换设置为正确的图像）。

将此添加到css：

ul {
  -webkit-backface-visibility: hidden;
}

使一切正常工作。这对我来说没有意义，我只是在试图找出如何停止在转换之间闪烁时偶然发现的。

4

1 回答 1

9

我想我实际上可能已经找出了原因。

正在使用的转换库似乎有一个错误，这意味着 translate() 被用于转换，而不是 translate3d() 尽管它可用。

更改后，额外的 css 规则：

-webkit-backface-visibility: hidden;

不再有任何效果- 没有它，转换将 dom 节点移动到正确的位置。

我由此推断，css 规则以某种方式强制在对象上使用 translate3d() 方法。

但是，为了停止帧之间有些锯齿状的移动，我仍然需要添加：

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

我只是通过反复试验才发现这一点：在我的 css 中添加建议的“修复”：

-webkit-perspective: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
visibility:visible;

并确保使用了'translate3d'，然后我逐渐删除了css'fixes'，直到它只是'-webkit-transform: translate3d(0,0,0);' 在一个地方是必要的。

因此，对动画进行正确调用，并在一个地方应用 css 样式的组合可以实现更好的过渡：)

于 2012-12-19T14:53:04.770 回答