Question

使用html通过phonegap为Android开发应用程序时，切换页面时会出现明显的闪烁。这是因为加载新的html文件引起的。

可以通过替换点击元素并使其淡入来避免这种情况吗？

我不介意使用Javascript或Jquery，但我似乎找不到使用html和css的方法。

我基本上创造了一个儿童互动故事/书。因此，单击goback或goforth按钮将加载新内容，而不会影响按钮。

Answer 1

最好能够了解导致你闪烁的原因，但由于你没有给我们任何信息，我们可以说不多。

使用普通的javascript替换元素非常容易：

function replaceElem(origElem, newElem) {
    var parent = origElem.parentNode;
    parent.insertBefore(newElem, origElem);
    parent.removeChild(origElem);
}

如果要淡入新元素，可以使用CSS转换或支持动画的库来实现。

如果你想让新元素在旧元素的顶部淡出，那么你必须玩一些具有重叠对象和定位的游戏，并且只有在新元素完全淡入后才删除旧元素。这是非常可行的，但不是只用一个元素替换另一个元素那么简单。

一种更简单的方法是在原始页面中同时拥有两组HTML：

<div id="page1" class="page">
    <div>Other HTML here</div>
</div>
<div id="page2" class="page" style="display: none;">
    <div>Other HTML here</div>
</div>

然后，你可以隐藏显示只有这样的特定页面：

function showPage(id) {
    // hide all pages
    var pages = document.querySelectAll(".page");
    for (var i = 0; i < pages.length; i++) {
        pages.style.display = "none";
    }
    // show one particular page
    document.getElementById(id).style.display = "block";
}

// show page 2
showPage("page2");

单击时替换元素

1 个答案: