8

CSS を使用した後、transitionまたはanimationそれをrotate含む div 全体が少しぼやけ
てしまうと、要素を再描画することによる何らかの副作用であると読みましたが、それを防ぐ方法はありますか?

.toggle {
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: 7px;
    right: 94px;
    z-index: 200;
    background: transparent url("../img/handle-open.png") no-repeat;

    -webkit-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
       -moz-transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
            transition: all 1s cubic-bezier(0.91,0.00,1.00,1.00);
}

.toggle-closed {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
            transform: rotate(180deg);
}

私は同じことを達成しようとしanimate、同じ結果を得ました

ここに画像の説明を入力

更新:何か奇妙なことが起こっていることに気付きました.Chromeでは、アニメーションが実行されると要素がぼやけ、アニメーションが停止すると通常に戻ります
.iOSでは逆に発生します.アニメーション中は画像が鮮明ですが、完了するとぼやけます. ! 別の奇妙な @$$ バグ!?

4

1 に答える 1

1

アニメーションを実行した後、このような問題を見たことがあります。トランジション後のオブジェクトの寸法を確認してください。サイズが数ポイント変更され、ぼやけが発生している可能性があります。すなわち:

移行前: 36x36 移行後: 36.2 x 36.8

于 2012-06-01T20:48:36.883 に答える