Javascript 在angular ui router中，是否可以为特定视图设置动画？

要在angular.js ui router中设置状态更改的动画，有用于

enter

和on

leave

的类。这意味着当我制作动画时，每个视图的效果都是一样的

这个例子不是我的，但请注意，当我返回到前一个状态时，动画是相同的，它会向左移动

---

有没有办法在每个状态或其他事件上添加动画？

由于动画是通过CSS应用的，因此您唯一的选择似乎是根据新状态和以前的状态确定应应用哪些CSS。将类应用于视图更改事件的传出视图很容易，但对于传入视图则困难得多

这应该是可行的，但涉及黑客angular-ui-router.js。我认为将此功能写入某种扩展脚本应该相对简单

• 为将要执行的不同动画创建不同的CSS类。例如，如下图所示向左和向右滑动

• 在forms controller中添加一个范围变量，该变量指示应发生的动画，例如

  $scope.animationType

• 在forms controller中，向视图更改事件添加一个侦听器，该事件将根据当前和将来的状态更改

  $scope.animationType

  的值。该值应将CSS类与要执行的动画相匹配

• 在angular-ui-router.js中找到

  cleanupLastView

  函数，并添加参数和前两行：

然后您必须将调用更改为

cleanupLastView

，以便包含克隆的元素：

cleanupLastView（clone）

不包括带有

@关键帧的缩写CSS

.form-view-slide-left.ng-enter            {
    animation:slideInRight 0.5s both ease;
}
.form-view-slide-left.ng-leave            {
    animation:slideOutLeft 0.5s both ease;
}
.form-view-slide-right.ng-enter            {
    animation:slideInLeft 0.5s both ease;
}
.form-view-slide-right.ng-leave            {
    animation:slideOutRight 0.5s both ease;
}

.form-view-slide-left.ng-enter            {
    animation:slideInRight 0.5s both ease;
}
.form-view-slide-left.ng-leave            {
    animation:slideOutLeft 0.5s both ease;
}
.form-view-slide-right.ng-enter            {
    animation:slideInLeft 0.5s both ease;
}
.form-view-slide-right.ng-leave            {
    animation:slideOutRight 0.5s both ease;
}