Javascript 在AngularJS路线之间设置英雄元素动画

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

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

单击“路线更改”按钮。在新模板上，按钮如下所示：

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

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

编辑：我建立了一个我想要完成的例子。示例中缺少的关键组件是两个页面位于同一路线上。我想动画这个过渡的交叉路线，与整个不同的内容在每个页面上除了一个共同的，动画，英雄元素

---

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

假设您使用的是angularjs

您可以仅在该html中创建子路由，并将该小子路由替换为模板

或者你也可以使用ng按钮的ng include来代替整个html

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

---

假设您使用的是angularjs

您可以仅在该html中创建子路由，并将该小子路由替换为模板

或者你也可以使用ng按钮的ng include来代替整个html

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

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

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

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

总而言之，英雄元素必须存在于正在转换的两个视图之间。转换时，英雄元素暂时隐藏在目标视图中，直到位置动画结束。

---

---

如果直接加载目标视图（刷新、书签），则不会发生动画，并且存在英雄元素。

我不确定是否完全理解您的解决方案。你介意举个简单的例子吗？对不起，我现在不在电脑旁。。也许我以后会提供一把小提琴。现在，你可以看看ng交换机的例子，也可以看看ng包括。。你可以把你的小盒子放在一个html文件中，并根据点击将其包含在dom中，或者把它放在一个div中，这样你就可以根据点击显示或隐藏它们，或者使用NoShow和ng hide或ng-switch@emzy你是不是想做点什么，比如你点击按钮，当内容改变时，按钮从上到下滑动？没错。我在问题中添加了一些细节，并举了一个例子。@emzy试试我为您制作的jsbin。。希望有帮助。我不太明白你的解决办法。你介意举个简单的例子吗？对不起，我现在不在电脑旁。。也许我以后会提供一把小提琴。现在，你可以看看ng交换机的例子，也可以看看ng包括。。你可以把你的小盒子放在一个html文件中，并根据点击将其包含在dom中，或者把它放在一个div中，这样你就可以根据点击显示或隐藏它们，或者使用NoShow和ng hide或ng-switch@emzy你是不是想做点什么，比如你点击按钮，当内容改变时，按钮从上到下滑动？没错。我在问题中添加了一些细节，并举了一个例子。@emzy试试我为您制作的jsbin。。希望能有帮助。你可以用css来做这件事。只要在路由发生变化时为元素分配一些类，并使用css转换就可以了。不过这并不简单，因为元素在旧路由上被破坏，在新路由中被构造。使用css转换仍然很容易。只要在新路线开始的时候做就行了loads@ribsies我在问题中添加了更多细节和示例，以便更好地了解我要创建的内容。因此，您不仅要尝试设置元素的动画，还要以某种方式将一个元素变形为完全不同的元素。这是不可能的。动画制作很容易，你必须重新思考你想做什么。你可以用css来做这件事。只要在路由发生变化时为元素分配一些类，并使用css转换就可以了。不过这并不简单，因为元素在旧路由上被破坏，在新路由中被构造。使用css转换仍然很容易。只要在新路线开始的时候做就行了loads@ribsies我在问题中添加了更多细节和示例，以便更好地了解我要创建的内容。因此，您不仅要尝试设置元素的动画，还要以某种方式将一个元素变形为完全不同的元素。这是不可能的。制作动画很容易，你必须重新思考你想做什么。