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

Question

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

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

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

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

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

目前似乎“登录屏幕”class 被转移到“主”状态，因为动画继续。我不知道如何正确地做到这一点，但仍然能够从动画中 select 它 CSS。

如有任何提示，我们将不胜感激。谢谢！

Answer 1

折腾了好几个小时，（貌似）发现问题主要是注入HTML时如何正确应用CSSselector，以及某些css 配置。

在应用任何动画之前，需要为 parent 元素定义一个转换规则（在本例中为 div 和 [ui-view] 属性）。所以这是 animations.css:

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

然后到 select child div 的（我们正在注入的那些），语法如下：

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

如果您已使用 id="login-screen" 标记 child div，此规则将 select 注入 div 并将动画应用于当 ngAnimate 应用 ng-enter class 时。同样的程序适用于 ng-enter-active、ng-leave 等

花了一段时间才弄清楚的原因是 1) 我没有使用 RTFM，并且 2) 就像它在 plunker 中显示的那样，一些动画显然可以在没有定义的情况下实现过渡规则。因此，从逻辑上讲，我专注于 AngularJS 和 CSS selection 部分作为故障点。这并不明显，但话又说回来，RTFM。

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

Animating one specific ui-router state transition with ng-animate css

angularjs

angular-ui-router

css-animations

ng-animate