使用 ng-animate css 动画一个特定的 ui-router 状态转换答案

【问题标题】：Animating one specific ui-router state transition with ng-animate css使用 ng-animate css 动画一个特定的 ui-router 状态转换
【发布时间】：2016-03-23 05:00:45
【问题描述】：

我正在尝试在“登录”状态和“主要”状态之间切换时创建一个简单的登录提示动画。这是我正在尝试做的事情：http://plnkr.co/edit/B0NOkcuamCPPeuSh6dAr?p=preview

我已经广泛寻找示例（并找到了some），但我无法在我的机器上重新创建它。

在我的代码中，我将内容注入 index.html，如下所示：

<div ui-view class="login-screen"></div>

因为从 animations.css 中选择这个类是我能做的最好的事情，甚至可以让动画运行。我想要实现的是让动画只在 login.html 中的内容上触发，而 main.html 中的内容保持不变。我尝试嵌套状态来重新创建链接的示例（他有一个我试图模仿的 plunker），但没有成功 - 我不太了解 SASS/LESS 来说明它为什么不起作用，但似乎我无法通过我的 CSS 选择嵌套状态，因为根本没有动画。

目前，“登录屏幕”类似乎已转移到“主”状态，因为动画会继续。我不知道如何正确执行此操作，但仍然能够从动画 CSS 中选择它。

任何提示将不胜感激。谢谢！

【问题讨论】：

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

【解决方案1】：

摆弄了几个小时后，（似乎）发现问题主要在于如何在注入 HTML 时正确应用 CSS 选择器，以及某些 css 配置。

在应用任何动画之前，需要为父元素（在本例中为具有 [ui-view] 属性的 div）定义一个过渡规则。所以这在animations.css中：

[ui-view] {
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

然后选择子 div（我们正在注入的那些），语法如下：

[ui-view].ng-enter #login-screen {
    animation stuff;
}

如果您使用 id="login-screen" 标记了您的子 div，则此规则将选择注入的 div 并在 ngAnimate 应用 ng-enter 类时对其应用动画。相同的过程适用于 ng-enter-active、ng-leave 等。

这需要一段时间才能弄清楚的原因是 1) 我没有 RTFM，以及 2) 就像它在 plunker 中显示的那样，一些动画显然是可能的，而无需定义该转换规则。因此，从逻辑上讲，我将重点放在 AngularJS 和 CSS 选择部分作为失败点。这并不明显，但话又说回来，RTFM。

【讨论】：