Question

我正在尝试通过路径更改将DOM元素从一个位置动画到另一个位置。例如：

+------+
|    o |   (o = the element)
|      |
|      |
+------+

单击按钮，路线更改。在新模板上，按钮位于此处：

+------+
|      |
|      |
|    o |
+------+

现在我有两个单独的html文件用于视图，按钮是两个独立的DOM元素。如何在路线更改期间将按钮从一个位置设置为另一个位置？

编辑：我建立了一个我想要完成的例子here。示例中缺少的关键组件是两个页面位于同一路径上。我希望为这个过渡过渡路线制作动画，每个页面上都包含完整的不同内容，除了一个常见的动画英雄元素。

我还发现，我想要做的术语是“英雄元素”，并更新了问题标题。

Answer 1

假设您正在使用angularjs，

您可以仅在该html中创建子路径，并替换模板的小子路径。

或者您可以使用ng-switch为按钮执行此操作而不是整个html。

编辑：我为你做了一个jsbin。希望这有帮助。

Answer 2

检查本教程（也可以使用现成的组件），它可以激活不同视图之间的英雄元素，并维护正确的路径。

总而言之，必须在要转换的两个视图之间存在hero元素。转换时，英雄元素暂时隐藏在目标视图中，直到位置动画结束。如果直接加载目标视图（刷新，书签），则不会发生任何动画，并且英雄元素就在那里。