Question

要对angular.js ui-router中的状态更改进行动画处理，可以使用enter和leave上的类。这意味着当我制作动画时，每个视图都会一样。

这个例子不是我的，但请注意，当我回到之前的状态时，动画是相同的，它向左移动。 http://embed.plnkr.co/M03tYgtfqNH09U4x5pHC/preview

有没有办法在每个州或其他活动中添加动画？

Answer 1

当通过CSS应用动画时，似乎唯一的选择是根据新状态和先前状态确定应该应用什么CSS。可以很容易地将类应用于视图更改事件的传出视图，但对于传入视图则更加困难。

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

为将要执行的不同动画创建不同的CSS类。例如。向左滑动和向右滑动，如下所示。
在表单控制器中添加一个范围变量，指示应该进行哪个动画，例如$scope.animationType。
在窗体控制器中，向视图更改事件添加一个侦听器，该事件将根据当前和未来状态更改$scope.animationType的值。该值应与您要执行的动画的CSS类匹配。
在angular-ui-router.js中找到cleanupLastView函数并添加参数和前两行：

function cleanupLastView(clonedElement) {
        if(clonedElement) clonedElement.attr("class", scope.animationType);
        if(currentEl) currentEl.attr("class", scope.animationType);
...

然后您必须将调用更改为cleanupLastView，以便包含克隆元素：cleanupLastView(clone)

未包含@keyframes的缩写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;
}

在角度ui-router中，是否可以为特定视图制作动画？

1 个答案: