3

左に浮かぶ約20個のdivを保持するコンテナdivがあります。Tween.jsを使用してjavascriptアニメーションで親divのサイズを変更すると、divの1つにマウスを合わせない限り、フロートは新しいサイズにリフローしません。

何かがページの更新を妨げているようです。

おそらくjavascriptを介して表示を強制的に更新する方法があると思いますか？

アップデート：

私はそれをJSフィドルに置きました：http： //jsfiddle.net/mattlundstrom/fNUhn/

サムネイルをクリックして、アニメーションを切り替えます。このバージョンでは、TweenLiteを使用して、＃project-containerの「左」CSSをアニメーション化します。コンテナのコンテンツをリフローさせるには、アニメーションの後にマウスを移動する必要があることに注意してください。

この結果は、Safari5+OSXおよびChrome20+OSXで得られます。Firefox13.0OSXで期待どおりに動作します。

更新2

私が見ているもののビデオ：http： //f.cl.ly/items/1R1n2s0U3I3c1M3s2K0T/lundstrom_float_issue.mov

4

1 に答える 1

1

あなたが言ったように、私はあなたの問題を再現することができました。アニメーションまたはトランジション後に要素を再描画または測定するWebkitの問題のようです。

これは決して最善の解決策ではありませんが、少なくとも当面は機能し、私が見つけたものが他の人がもっと知ることができるようになることを願っています。

アニメーションにonCompleteを追加し、 .project mouseleaveをトリガーすると、正常に機能しているように見えます。

function completeAnimate(){
        $('.project').trigger('mouseleave');
    }

    function contract(){

        // PROJECTS CONTRACT RIGHT
        TweenLite.to($('#projects-container'), .5, {css:{left:"300px", opacity:".5"}, ease:Expo.easeInOut, onComplete: completeAnimate});
    }

これが私のjsfiddleで、いくつかのテストと他のアニメーションテストがあり、私が試したことのいくつかを見ることができます。

jQuery animate（）およびcssキーフレームアニメーションは、使用しているTweenコードと同じ結果になりますが、ストレートスタイルの更新は正常に機能します。

$('#projects-container').css('left','300px');

それはまったく問題ありませんが、もちろんアニメーションもありません。

私が気付いた他のいくつかのことは、.projectイベントバインディングを削除しても、正しく再描画されないことですが、マウスを動かしても再描画されません。それは単にそのようにとどまります。

また、再描画を強制するために通常使用できるいくつかのトリックを使用して、要素の再描画を強制してみました。私はこれを完全に、そしてアニメーションが始まった後、間隔を置いて試しましたが、どれもうまくいきませんでした。

また、2つのトゥイーンを1つに組み合わせて、両方のプロパティを使用することもできます。参考までに。

うまくいけば、これは誰かがWebkitの移行で起こっている本当の問題を見つけるのに役立つでしょう。

于 2012-07-27T03:47:23.413 に答える