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

Animate hero elements between AngularJS routes

本文关键字：英雄 元素 动画 之间 AngularJS 制作      更新时间：2024-02-29

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

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

单击按钮，更改路线。在新模板上，按钮在下面：

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

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

编辑：我在这里建立了一个我想要实现的目标的例子。示例中缺少的关键组件是这两个页面位于同一路线上。我想为这个跨路线的过渡设置动画，除了一个常见的动画英雄元素外，每个页面上都有完全不同的内容。

我还发现我想做的是"英雄元素"，并更新了问题标题。

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

http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html

总之，英雄元素必须存在于转换的两种观点之间。转换时，英雄元素会暂时隐藏在目标视图中，直到位置动画结束。如果直接加载目标视图（刷新、书签），则不会发生动画，英雄元素也会出现。

假设您使用的是angularjs，

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

或者u可以用ng开关来做ng include，让按钮来做，而不是整个html。

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

jsbin

相关文章：