2

コンテナーをアニメーション化しようとすると (以下で説明します)、コンテナーの遅延 (途切れ途切れの動きなど) が発生することがよくあります。色々と調べたり色々試してみたのですが解決に至りませんでした。私が見つけた唯一のことは、1つを除いてすべての画像を削除すると、すべてがスムーズに機能するということでした.

したがって、すべての画像を削除して、そこにある画像を 1 つだけにすることで、問題は解決します。しかし、私はすべての画像が必要です..機能は実際にはスライドショーです（画像の通常のフェードトランジション）。

私のセットアップを見て、ここで何か悪いことをしている場合は注意してください (現在は WebKit のみ):

<div id="container">
    <div id="inner">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        [...]
    </div>
</div>

CSS の場合:

#container {
    width:100%;
    height:100%
    position:absolute; 
    -webkit-transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 800ms linear;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d; /* *should* improve performance? */
}
#inner {
    position:relative;
    width:100%;
    height:100%;
}
.image {
    position:absolute;
    left:0;
    top:0;
    background-image:[something];
    width:100%; 
    height:100%; 
    background-size:cover;
}

次に、コードでこれらのいくつかを実行して、コンテナを移動させます

$('#container').css('-webkit-transform', 'translate3d(0,500px,0)');

前もって感謝します！

編集： ここにフィドルがあります（ここでは結果ウィンドウが非常に小さいことを思い出してください。これにより、滑らかさが得られます。ただし、フルスクリーンでは、少し途切れます）

EDIT2：壊れたフィドルを修正しました！

4

2 に答える 2

0

このような場合、過負荷のためにアニメーションの遅延が発生することがよくあります。たぶん、いくつかの画像のプリロードを行う必要があります。

ここに示されているように

そして完全なマニュアルはこちら

于 2013-09-23T20:26:14.857 に答える