Question

我正在努力让一些简单的动画行为发挥作用，但是已经撞墙而且无法解决我做错的事情。

我的代码包含一个angularui ui-view，其中一个类指示UI视图应该从哪个方向到达 - 在屏幕的左侧或右侧，以显示滑动面板的显示或显示或隐藏数据。

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

http://plnkr.co/edit/H2eRr5pPNKTDHXFXsyUn

ui视图代码是;

<div ui-view class="{{whichWayToMove}}"></div>

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

我觉得这个问题是一个范围问题，但我会感谢一些外界的帮助。

Answer 1

ui-view有时滑错方式也有问题。我的问题是该类是ui-view的一部分，但是ui-view被复制以便能够将一个视图滑出一个视图。在这个重复期间，一个视图获得了旧类，另一个视图获得了新视图像这样更新的课程：

<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>

这搞砸了动画。将class="{{whichWayToMove}}"放在父div中可以防止这种情况，并使您的css更符合逻辑。.slide_from_right_to_left将成为RTL情境的父类，在该情境下，两个视图的所有动画都存在。你可以在plnkr看到我的意思。

Answer 2

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

查看plnkr中登录的控制台，看看我的意思。

可以找到一个工作版本here来侦听$ scope而不是$ rootScope上的事件，这样当控制器被删除时，$ scope就会被删除，因此不再是监听$ stateChangeStart事件

<强>更新

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

动画动画方向

2 个答案: