Question

要在状态之间实现不同的动画 - 我正在根据当前状态将一个类应用于ui-view：

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

然而，当视图进入时，最初，看来ng-enter会在currentClass.current.name中的类被绑定之前应用，因此我的动画会被忽略：

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

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

见plunker code for example。有什么想法吗？

Answer 1

由ng-class管理的CSS类与ALL ui-view动画冲突。

所以，问题在于这一行

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

不幸的是，ng-class与ui-view不兼容。这是完整的issue。

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

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

这是有效的plunker

干杯！

Answer 2

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

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

<强>标记

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