Class 未绑定到 ui-在 ng-enter 之前查看

Question

为了在状态之间实现不同的动画 - 我根据当前状态将 class 应用到 ui-view：

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

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

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

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

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

Answer 1

CSS classes managed by ng-class conflict with ALL ui-view animations.

所以，问题出在这一行

<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

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

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

标记

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

Class not binding to ui-view before ng-enter