1

サイトでいくつかの Webkit トランジションを試してみたところ、問題が発生しました。リンクのホバー状態により、1 ピクセルの境界線が追加され、パディングが減少するため、位置が同じに保たれます。通常は正常に動作しますが、トランジションを追加するとうまくいきません。明らかに、1px の変更のみを行っているため、突然発生しますが、同時に発生するわけではありません。境界線の前のパディングが変更されるため、全体が「揺れます」。

#loginbuttons a {
    text-decoration: none;
    padding: 5px;
    -webkit-transition: all 0.5s ease;
}

#loginbuttons a:hover {
    padding: 4px;
    border: 1px solid black;
    background-color: yellow;
}

これを回避するために私が見つけた最良の方法は、通常の状態に白い境界線を付けて、色を変更するだけにすることですが、透明にしたい. また、白い背景色を設定せずに、背景色を黒ではなく白からフェードインする方法はありますか? 繰り返しますが、透明にしたいのですが、灰色になってから黄色になるのは奇妙に見えます!

ナビゲーション メニューにもトランジションがあり、同じことが起こります (今回はパディングとマージンを変更します)。

#nav ul li a {
    color: white;
    padding: 10px 10px 8px 10px;
    margin: 0 5px;
    border: 1px solid black;
    opacity: 0.85;
    -webkit-transition: all, 0.5s;
}

#nav ul li a:hover, #nav ul li a.selected {
    color: black;
    padding: 13px 13px 11px 13px;
    margin: 0 2px;
    text-shadow: 2px 2px 4px white, -2px -2px 4px white, 2px -2px 4px white, -2px 2px 4px white;
    opacity: 1;
    -webkit-box-shadow: 0px 0px 8px #888;
}

うーん、値を少し上げてみましたが、線形トランジションを使用してマージンとパディングを 15 ピクセルずつ変更しても、小さな (1 ピクセルまたは 2 ピクセルのように見える) 不具合が発生します。同じことがサファリとクロームで起こります。

スムーズにする方法はありますか？それとも色の問題を整理しますか？jquery で実行したほうがよいと思いますか (クロスブラウザーのサポートを無視して!)? オペラで同じことが起こるかどうか見に行くかもしれません...

編集：Mac用の10.5aオペラリリースはまだトランジションをサポートしていないようです...

4

1 に答える 1

2

まずborder: 1px solid transparent、トランジションで境界線の色だけが変わるようにしてみる価値があるかもしれません。その意味で、パディングは同じままであり、ブラウザーの当て推量が少なくなります。transparentが機能しない場合は、たとえばアルファ値が 0 の任意の色rgba(0, 0, 0, 0)も使用できます。

Opera Presto 2.3 はトランジションをサポートしていますが、別のステートメントを要求し-o-transition-propertyます。このリンクが役に立つことを願っています。 Firefox も CSS トランジションを行い、デモ ページがあります。Firefox でトランジションを機能させるには、-moz-ステートメントを使用する必要があります。

于 2010-02-21T02:41:48.220 に答える