1

CSS アニメーションでサイズを変更すると、垂直方向と水平方向の中央に配置された div が不規則で不安定な動きを示します。

div は絶対に配置され、固定の幅/高さと負のマージンがあります。

アニメーション自体は、固定の幅/高さと負のマージン値の 2 つの異なるセットを切り替えるだけで、カスタム トランジション プロパティが設定されます。

負のマージンが幅と高さに対して異なる速度でアニメーション化されているように感じます。

animate()代わりにjQueryを使用して、使用するCSSトランジションを(リニア、クォートなどに)変更しようとしましたcss()が、同じ結果が得られます。

IE > = 8で動作する場合、これがなぜ起こっているのか、おそらくこれを行うためのより良い方法を説明できる人はいますか?

例:
http://jsfiddle.net/p4B3S/1/

HTML

<div class="outer">
    <div class="inner">
        +
    </div>
</div>
<button>toggle</button>​

CSS:

.outer {
    /* easeOutQuart */
    -webkit-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
       -moz-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
        -ms-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
         -o-transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
            transition: all 750ms cubic-bezier(0.165, 0.840, 0.440, 1.000);

    position: absolute;

    width: 200px;
    height: 200px;

    left: 50%;
    top: 50%;

    margin-left: -100px;
    margin-top: -100px;

    outline: 1px solid red;       
}

.inner {
    position: absolute;

    width: 40px;
    height: 40px;

    top: 50%;
    left: 50%;    

    margin-left: -20px;
    margin-top: -20px;

    text-align: center;

    line-height: 40px;

    outline: 1px solid blue;    
}

button {
    width: 100px;
    height: 50px;
}

jQuery

$button = $('button');
$outer = $('.outer');

$button.toggle(function() {
    $outer.css({
        'width': '100px',
        'height': '100px',
        'margin-left': '-50px',
        'margin-top': '-50px'
    });
}, function() {
    $outer.css({
        'width': '200px',
        'height': '200px',
        'margin-left': '-100px',
        'margin-top': '-100px'        
    });    
});
4

2 に答える 2

0

答えは、サブピクセル値の丸めの実装にあると思います。

私が知る限り、Chrome 27.0 にはこの問題はないようですが、他のほとんどのブラウザーではまだ解決されていないと思います。

レンダリング エンジンがこの動作をどのように実行するかは、CSS 仕様では規定されていません。適切と思われる方法でレンダリングするかどうかは、実装に任されています。

上記の引用は、この件名について興味深い投稿をしている John Resig からのものです。これが実際に望ましいブラウザの動作であるかどうかについての熱烈なコメントとともに: http://ejohn.org/blog/sub-pixel-problems-in-css/

于 2013-06-09T23:16:48.867 に答える
0

コメントするだけの担当者がいないので、ここで私の所見を述べます。IE8.0.7601.17514 64 ビットでは遷移はありません。それは単に大きいか小さいかのどちらかです.1920x1080および1440x720で実行している場合、FF11のディドルでトランジションは問題なく機能するようですが、Web Developer Toolbarプラグインを使用して画面のサイズを1280x720に変更し、トグルを押すと、赤いボックスがトランジションしました、青いボックスは静止したままで、小さな黒い十字線が振動してあちこちに跳ねました。800x600 では、赤いボックスは適切に遷移しましたが、以前は静的だった中央の青いボックスは振動して不安定と呼ばれ、640x480 ではすべてが振動して跳ね返りました..これに基づいて、それがしなければならないと推測する必要がありますpx で定義されたサイズと、画面サイズ/解像度に相対的な固定位置を使用します。

于 2012-04-14T03:41:44.813 に答える