AngularJS 路线之间的动画英雄元素

Question

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

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

点击按钮，路线改变。在新模板上，按钮位于下方：

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

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

编辑：我构建了一个我想要完成的示例 here。该示例中缺少的关键组件是两个页面在同一路由上。我想为这个过渡设置动画 cross-route，每个页面上都有完全不同的内容，除了一个常见的动画英雄元素。

我还发现我正在尝试做的事情的术语是 "hero element" 并更新了问题标题。

Answer 1

假设您正在使用 angularjs,

您可以只在 html 中创建子路由，然后将那个小子路由换成模板。

或者您可以使用 ng-switch 执行 ng-include，而不是整个 html。

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

Answer 2

查看本教程（也可以使用现成的组件），它在不同视图之间为英雄元素设置动画并维护正确的路线。

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

Animate hero elements between AngularJS routes