Angularjs 为动画方向设置动画

我试图让一些简单的ng动画行为正常工作，但遇到了麻烦，无法完全理解我做错了什么

我的代码包含一个带有类的angularui视图，该类指示ui视图应该到达的方向-屏幕的左侧或右侧，以显示或隐藏数据的滑动面板

你可以看到我在这里后-注意链接箭头的方向

ui视图代码为

使用两个routeChange事件侦听器来检测适当的CSS何时应该更改ui视图的来源方向

---

我觉得这是一个范围问题，但希望得到一些外部帮助。

您的问题是，每次切换选项卡时，它都会为该选项卡创建一个新的控制器，因此您可以继续为$stateChangeStart注册新的侦听器，而不必取消旧的注册。这意味着，当注册新侦听器以更改whichWayToRemove属性时，它最终将被注册的第一个处理程序覆盖

请看一下登录到中的控制台，以了解我的意思

可以找到侦听$scope而不是$rootScope上的事件的工作版本，以便在删除控制器时，$scope将与其一起删除，因此不再侦听$stateChangeStart事件

更新

---

要使动画沿箭头方向出现，只需更改设置的类。这已在中更新。我还删除了侦听事件，因为在创建控制器时，将设置whichWayToMove属性。

您的问题是，每次切换选项卡时，它都会为该选项卡创建一个新的控制器，因此您会继续为$stateChangeStart注册新的侦听器，而不会注销旧的。这意味着，当注册新侦听器以更改whichWayToRemove属性时，它最终将被注册的第一个处理程序覆盖

请看一下登录到中的控制台，以了解我的意思

可以找到侦听$scope而不是$rootScope上的事件的工作版本，以便在删除控制器时，$scope将与其一起删除，因此不再侦听$stateChangeStart事件

更新

---

要使动画沿箭头方向出现，只需更改设置的类。这已在中更新。我还删除了侦听事件，因为当创建控制器时，将设置whichWayToMove属性。

我还遇到了ui视图滑动错误的问题。 我的问题是该类是ui视图的一部分，但是ui视图被复制，以便能够滑出一个视图，滑入一个视图。在这个复制过程中，一个视图得到旧类，另一个视图得到新的更新类，如下所示：

<div ui-view="" class="slide_from_left_to_right ng-animate ng-enter ng-enter-active">
</div>
<div ui-view="" class="slide_from_right_to_left ng-animate ng-leave ng-leave-active">
</div>

---

这会弄乱动画。将类={{whichWayToMove}}放在父div中可以防止这种情况，并使css更具逻辑性。在RTL情况下，从_right _滑动到_left将是父类，在这种情况下，两个视图的所有动画都存在。你可以看到我的意思。

我的ui视图也有问题，有时会滑错方向。 我的问题是该类是ui视图的一部分，但是ui视图被复制，以便能够滑出一个视图，滑入一个视图。在这个复制过程中，一个视图得到旧类，另一个视图得到新的更新类，如下所示：

<div ui-view="" class="slide_from_left_to_right ng-animate ng-enter ng-enter-active">
</div>
<div ui-view="" class="slide_from_right_to_left ng-animate ng-leave ng-leave-active">
</div>

---

这会弄乱动画。将类={{whichWayToMove}}放在父div中可以防止这种情况，并使css更具逻辑性。在RTL情况下，从_right _滑动到_left将是父类，在这种情况下，两个视图的所有动画都存在。你可以在会议上明白我的意思。

谢谢你。它还没有完全工作-当标签2进入视图时，它工作正常，但是当点击标签2上的链接时，它就不会沿着箭头的方向移动。我一直在努力使两个选项卡朝着同一方向移动，要么1和2向左移动，要么1和2向右移动。我已经更新了答案，包括如何按照箭头获得动画。当你说你希望两个标签朝同一个方向移动时，我不确定你在寻找什么。这是不是意味着你不想让他们跟着箭头走？无论如何，您应该能够在这一点上完成您需要的使用ng类而不是类谢谢。它还没有完全工作-当标签2进入视图时，它工作正常，但是当点击标签2上的链接时，它就不会沿着箭头的方向移动。我一直在努力让两个标签朝着同一个方向移动，要么1和2向左移动，要么1和2向右移动。我已经更新了答案

---

包括如何获得箭头后面的动画。当你说你希望两个标签朝同一个方向移动时，我不确定你在寻找什么。这是不是意味着你不想让他们跟着箭头走？无论如何，此时您应该能够完成所需的使用ng类而不是类将direction类应用于ui视图的父容器正是我一直在寻找的！谢谢！将direction类应用于ui视图的父容器正是我一直在寻找的！谢谢！