Javascript 单页应用程序部分内容的CSS转换

我正在使用js/handlebar/phonegap开发一个单页应用程序。在开始时，该体系结构是使用jquery mobile的多个页面，使用标签上的标准data transition=“slide”属性执行幻灯片或翻转效果。相当标准的东西。从那时起，我切换到了把手，架构变成了单页，内容加载到容器div中

<div data-role="page" id="mealplans">
        <div data-role="header" id="header" data-position="fixed">
            <div class="center-wrapper">
                <img src="img/logo.png" width="40" height="40"/>
            </div>
            <div class="accountMenu">
                <a href="home.html" data-transition="slide"><img src="img/menu.png" width="30" height="30"/></a>
            </div>
        </div>
        <div id="container" data-role="main">
        </div>
    </div>

使用append或innerHTML命令将我的页面内容注入到“container”div中

我想要的是在内容加载之间进行转换，使其看起来像幻灯片效果。但是因为我只有一个容器，我正在改变它的内部内容，所以我确定我需要第二个容器之类的东西

我一直在关注这篇文章，但我不确定我的内容在一个特定的div中加载后会如何

基本上，我想在“container”div中加载的内容上显示幻灯片效果

有人能帮我消化上面的链接并应用到我的架构中吗

---

提前感谢。

将当前内容包装在新的div中，将div设置为abs pos，并在插入新内容时开始淡入淡出状态。当if淡出时，将其从dom中删除。那么必须加入的新内容呢。那么，如何来回切换并使用动态解决方案优雅地进行切换呢？我知道如何淡出一个div。。。如何在内容之间切换。。。淡出旧内容。。。引入新内容并将其淡入。如果您将内部包装设置为abs pos，则可以将其放在作为内部包装兄弟的新内容前面。然后，当你淡出包装纸/旧包装纸时，新包装纸会从后面显露出来。。。