1

CSS3 トランジションを使用して、選択またはホバー メニュー効果を作成しようとしています。これを行うには、border-left-width と padding-left を同時にアニメーション化します。境界線は 6 ピクセル増加し、パディングは 6 ピクセル減少します。どちらも 0.3 秒の速度です。

Chrome では、どちらも同じ速度でアニメーション化され、滑らかに見えます。IE では、トランジションは瞬時に行われ (明らかにトランジション/アニメーションはありません)、見栄えもよくなります。Firefox では、境界線とパディングが同時にアニメーション化されますが、異なる間隔で表示されるため、テキストとコンテナーが跳ね返り、ぎくしゃくして見えます。

ここに Fiddle の例があります: http://jsfiddle.net/crisp330/w7phH/1/ (FF と Chrome の違いを参照してください?)

ChromeのようにFireFoxでこれをスムーズにアニメーション化する方法はありますか? LI 内に別の要素を配置してアニメーション化するなどの代替手段を使用できることはわかっていますが、このアプローチはすっごくきれいです!

CSS3 トランジションの要点は次のとおりです (動作例については jsFiddle を参照してください)。

ul li {
    padding-left: 12px;
    border: 0 none;
}

ul li:hover {
    padding-left: 6px;
    border-left: 6px solid #d17519;
    transition: border-left-width .3s, padding-left .3s;
    -moz-transition: border-left-width .3s, padding-left .3s;
    -webkit-transition: border-left-width .3s, padding-left .3s;
    -o-transition: border-left-width .3s, padding-left .3s;
}
4

2 に答える 2

3

ここでの本当の問題は、Firefox が非整数ピクセルのパディング値を許可するが、整数デバイス ピクセルの境界値のみを許可することです (Web ページは境界線が整数幅であることに依存していることが判明したため)。Chrome は両方を整数のピクセル数に強制するため、そこでうまくいきます。今のところ。サブピクセルパディングを開始するまで。しかし、Firefox では、境界線が半分の整数より少し小さいところから半分の整数より少し大きいところに移動するたびに、1-device-px のバウンスが発生します。

残念ながら、ここには本当に素晴らしい解決策はありません。たとえば、WebKit のアプローチが引き起こす問題の説明については、http://robert.ocallahan.org/2008/01/subpixel-layout-and-rendering_22.htmlを参照してください。

于 2012-10-31T06:12:07.153 に答える