1

目前，我正在通过在我的 css 文件中应用以下 css 规则来处理我的 kendo 移动网络应用程序的无样式内容的闪烁：

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

这将我的所有内容隐藏在我的剑道视图中，然后在 JQuery“加载”事件中，我删除了上面的 css 属性：

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

一切正常，我对此没有任何问题，除非使用剑道的视图转换。

当我使用slide:left过渡时，我的 css 文件中定义的原始visibility: hidden;文件被重新应用，导致一切都不可见。

发生这种情况是否有原因，特别是剑道以及它如何处理视图和转换？我知道我可以手动visibility: hidden;为每个data-role="content"元素添加一个类，然后在 jquery 的“加载”事件处理程序中删除该类，但我希望我的解决方案少一些“硬编码”。

谢谢你。

4

3 回答 3

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>

3.) 对于每个视图，确保手动添加data-role="content"div 标签，同时应用我们在上面创建的类：

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

4.) 最后，在每个视图函数的末尾调用我们在步骤 2 中创建的data-init函数：

<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 回答
0

data-role=content 属性是在视图初始化时设置的——因此您的加载事件处理程序不会影响所有视图（除非您手动设置了 data-role=content）。

您可以考虑隐藏应用程序容器。

于 2013-02-15T12:18:36.523 回答