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() ではなく、transition に使用されていました。

これを変更した後、追加の 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」が使用されていることを確認してから、「-webkit-transform: translate3d(0,0,0);」になるまで css の「修正」を徐々に削除しました。一箇所必要でした。

したがって、アニメーションの正しい呼び出しを行い、CSS スタイルを 1 か所に適用することを組み合わせることで、より優れたトランジションを実現できます :)

于 2012-12-19T14:53:04.770 に答える