在angular的ui-router中，是否可以对特定的视图进行动画化?

In angular ui-router is it possible to animate specific view?

本文关键字：视图 动画 ui-router angular 是否      更新时间：2023-09-26

要在angular.js ui-router中显示状态变化的动画，有enter和leave的类。这意味着当我制作动画时，它对于每个视图都是相同的。

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

是否有办法在每个状态或其他事件上添加动画?

由于动画是通过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;
}
相关文章：