动画 ngView 内容顺序而不是同时答案

【问题标题】：Animating ngView content sequentially instead of concurrently动画 ngView 内容顺序而不是同时
【发布时间】：2014-01-14 00:05:27
【问题描述】：

根据 Angular 1.2 ngView 文档“进入和离开动画同时发生”，因此 ngView 更新过程的延时类似于

添加新内容 > 动画进入/离开 > 删除旧内容

有没有办法按顺序而不是同时进行——首先删除旧的，然后添加新的？

动画离开一个>删除旧内容>添加新内容>动画进入一个

我的意思是，我添加（输入）内容的 Ctrl 正在触发另一个事件/动画，而 ngView 的先前内容正在干扰它们。或者有没有办法在进入/laving动画完成后触发事件（从控制器的范围内）？

【问题讨论】：

你不能，动画开始时新旧内容都会在DOM树中。您可能需要寻找替代方法。但是，我认为您可以实现类似add new content > animate leaving one > remove old content > animate entering one.
好吧，我发现我只需要监听一个“animationend”事件，但是有没有一些默认的角度风格的方法可以在视图的输入内容中捕获它？我认为应该可以通过扩展 ngView 指令来实现，但是……
角度检测动画结束有一些方法。如果你使用 CSS 过渡，你可以在动画元素上监听 TransitionEnd 事件（注意供应商前缀）。如果你使用 JS 动画，你可以在app.animation() 模块中返回一个function。如果听起来像您想要的，我可以在下面详细发布答案。或者您可以针对您的新要求提出另一个问题。

【解决方案1】：

CSS3 属性animation-delay 在大多数情况下应该可以解决这个问题。只是延迟动画的淡入淡出。

如果动画更复杂，你也可以考虑使用 CSS @keyframes。

【讨论】：

谢谢，这可能很有用，但正如我所提到的，它不仅与动画有关，还有其他由控制器触发的脚本，需要等待动画停止。是的，我可以通过一些超时来包装它们，但是不，这有点令人讨厌，而且对于未来的变化来说不是很容易维护。
我可以成像。我认为 Angular 动画组件背后的想法是，与 Angular 中的旧方式兼容，如果浏览器不支持动画，切换元素时不会有延迟。