在 AngularJS 路由之间动画英雄元素答案

【问题标题】：Animate hero elements between AngularJS routes在 AngularJS 路由之间动画英雄元素
【发布时间】：2015-04-04 20:12:47
【问题描述】：

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

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

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

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

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

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

我还发现我正在尝试做的术语是“英雄元素”并更新了问题标题。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

假设您使用的是 angularjs，

您可以仅在该 html 中创建子路由，然后将那个小子路由替换为模板。

或者你可以用 ng-switch 来做 ng-include 让按钮来做，而不是整个 html。

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

【讨论】：

我不确定我是否完全理解您的解决方案。您介意创建一个简单的示例吗？
对不起，我现在不在电脑旁。也许我稍后会提供一个小提琴。现在你可以尝试查看 ng-switch 示例和 ng-include .. 你可以将你的小盒子放在一个 html 文件中，并根据点击将它包含在 dom 中，或者将它放在一个 div 中以便你可以显示n 根据点击隐藏它们，使用 no-show 和 ng-hide 或 ng-switch
@emzy 你是不是在尝试做一些事情，比如你点击按钮，当内容改变时按钮从上到下滑动？
没错。我在问题中添加了一些细节，以及一个示例。
@emzy 试试我为你做的 jsbin.. 希望对你有帮助。