类在ng-enter之前未绑定到ui视图

Question

为了在状态之间实现不同的动画-我根据当前状态将一个类应用到ui视图：

<div ng-class="currentClass.current.name" ui-view></div>

然而，这是有效的-最初当视图进入时，似乎在绑定currentClass.current.name中的类之前应用了ng-enter，因此我的动画被忽略：

.slide-right.ng-enter {
  z-index: 100;
  left: -100%;
  background-color: green;
}

我可以将动画应用于ng-leave，因为在此之前已经应用了currentClass.current.name。

例如，请参阅plunker代码。有什么想法吗？

Answer 1

ng类管理的CSS类与ALL ui视图动画冲突。

所以，问题出在这一行

<section ui-view ng-class="stateClass"></section>

不幸的是，ng类与ui视图不兼容。这是完整的问题。

因此，您可以将class="{{stateClass}}"与ui视图一起使用。

<section ui-view class="{{stateClass}}"></section>

这是工作的plunker

干杯！

Answer 2

由于ui视图不支持ng类，您可以尝试ng-attr-class，它将在解析插值指令时设置属性值。

使用ng-attr-class="{{stateClass}}"设置类属性

标记

<div class="row">
    <section ui-view ng-attr-class="{{stateClass}}"></section>
</div>

工作Plunkr