Angular ui-router 动画子状态更改但不是孙子

【问题标题】：Angular ui-router animating child state changes but not grandchildAngular ui-router 动画子状态更改但不是孙子
【发布时间】：2016-05-11 01:32:16
【问题描述】：

我有一个带有主要抽象视图和嵌套子视图的 Angular 应用程序。主视图的其中一个子视图也是抽象的，具有自己的子视图。

当我改变主要父母的子状态时，动画效果很好，但是当我改变孙子的状态时，没有动画。

在查看开发人员工具时，我发现 ng-enter 和 ng-leave 类会在子状态更改时添加，但不会在孙子状态更改时添加。

这是一个 plunker 演示该行为。

【问题讨论】：

标签： angularjs angular-ui-router ng-animate

【解决方案1】：

这与您的 CSS 规则的编写方式有关，您正在使用 .ng-enter 和 ng-leave 的属性选择器来获取 ui-view，但是将 ui view 指令声明为元素和属性你的html。所以你应该做更多这样的事情：

ui-view.ng-enter, [ui-view].ng-enter { // animation }

这是您的 plunkr 的工作分支

【讨论】：

感谢您指出我将 ui-view 用作属性和元素，我从未注意到。有了这些信息，我意识到我可以进行您建议的 css 更改，或者只是将我的 ui-view 声明更改为属性，以便它与我的 css 匹配并且一切都很好。再次感谢！