1

現在、cssファイル内で次のcssルールを適用することにより、剣道モバイルWebアプリのスタイル設定されていないコンテンツのちらつきを処理しています。

[data-role="content"]
    { 
    visibility: hidden;
    }

これにより、剣道ビュー内のすべてのコンテンツが非表示になり、JQueryの「load」イベントで上記のcss属性が削除されます。

$(window).bind("load", function () {
    // flicker of unstyled content
    $("[data-role=\"content\"]").css("visibility", "visible");
});

すべてが正常に機能し、剣道のビュートランジションを使用する場合を除いて、これに問題はありませんでした。

slide:leftトランジションを使用するvisibility: hidden;と、cssファイルで定義された元のファイルが再適用され、すべてが非表示になります。

特に剣道でこれが起こっている理由と、それがビューとトランジションをどのように処理するかには理由がありますか？おそらく手動でvisibility: hidden;各data-role="content"要素にクラスを追加し、jqueryの「load」イベントハンドラーでそのクラスを削除できることは理解していますが、ソリューションの「ハードコーディング」を少し少なくしたいと思いました。

ありがとうございました。

4

3 に答える 3

0

data-role = content属性は、ビューが初期化されるときに設定されます。したがって、ロードイベントハンドラーがすべてのビューに影響を与えることはありません（data-role = contentを手動で設定していない場合）。

代わりに、アプリケーションコンテナを非表示にすることを検討してください。

于 2013-02-15T12:18:36.523 に答える
0

このメッセージは最近賛成されたので、スタイルのないコンテンツのちらつきを処理する方法を提供します。それは私を失敗させていません。

1.）シングルページアプリケーションのメインページにクラスを追加します。

<style>
    .m-hide-unstyled-content {
        visibility: hidden;
    }
</style>

2.）シングルページアプリケーションのメインページにグローバル関数を作成します。

<script>
        function removeFlickerOfUnstyledContentClass() {
            // flicker of unstyled content fix
            $(".m-hide-unstyled-content).removeClass("m-hide-unstyled-content");
        }
</script>

data-role="content"3.）すべてのビューについて、上記で作成したクラスを適用しながら、必ず手動でdivタグを追加してください。

<div class="m-hide-unstyled-content" data-role="content">
    ...
</div>

4.）最後に、すべてのビューのdata-init関数の最後に、手順2で作成した関数を呼び出します。

<div data-role="view" data-init="initMyView">
    ...
</div>

<script>
    function initMyView(event) {
        ...
        removeFlickerOfUnstyledContentClass();
    }
</script>

この設定を使用すると、スタイルが設定されていないコンテンツの厄介なちらつきに遭遇することはありません。これが一部の人々に役立つことを願っています。

于 2013-06-11T07:32:11.570 に答える
0

ちらつきのある要素にdisplay：noneを設定することで、ちらつきを回避することができました。次に、CSSまたはJSを使用して、必要に応じてそれらを表示します。おそらくonHideまたはonShowです。

于 2014-02-20T21:56:23.277 に答える