Javascript AngularJS webapp中内容级别之间的动画

我正在为我们正在开发的web应用程序构建一个功能。应用程序正在AngularJS 1.0.7上运行

功能如下： 用户可以非常传统地导航应用程序，深入到内容的各个层次。一个ng视图，多个控制器，其中包含更多控制器和分区

在内容的前4个级别中，用户能够看到“路径”（与面包屑相同）：

这就是事情变得有趣的地方。当用户单击其中一个级别时，该级别将展开，该级别的内容将在其中。最初打开的内容将向下滑动：

为了更好地理解它，可以参考Evernote的移动应用程序。在这里，您使用相同的机制在同一级别上的视图之间切换，因此每个级别都可以由一个父级中的控制器表示

然而，在我的例子中，所有4个级别都是层次结构。在级别1上，您可以选择查看多个级别2，在级别2上，您可以转到多个不同的级别3

---

我正试图看看如何使之成为可能。在转换过程中，我需要保持以前的和新的内容可见。

最后，我巧妙地使用虚拟元素实现了该功能。

触发导航时：

• 容器元素被复制并替换为实际内容
• 实际容器已移出屏幕
• 动画开始将虚拟元素从屏幕和实际内容区域转移到其位置