javascript - ngAnimate 一个 DOM 元素，它是使用 UI Router 呈现的模板的一部分

Question

我有这个示例元素，它使用 UI Router 和模板文件来呈现 DOM 元素。 http://plnkr.co/edit/3KgB5g

我想达到的目标: 当您单击Population 或Personnel 时标题淡入，模板呈现并在我返回主菜单时淡出。最好通过使用这样的指令:

<h1 anim-fade>Population</h1>

到目前为止我尝试了什么:

我试图为 [ui-view].ng-enter h1 定义 CSS 规则，但这并没有正常工作，因为 ng-enter 和 ng-leave View 的“阶段”重叠，所以那里的东西变得困惑。

我尝试使用 $animate 服务创建一个指令，但在决定何时触发“进入”和“离开”事件时卡住了。

我希望有一个简单、独立的解决方案，并将自己做进一步的研究。同时，我们将不胜感激任何建议。谢谢:)

Answer 1

ngAnimate 的问题在于它同时显示出现和消失的元素。您可以使用 CSS 关键帧动画来解决这个问题，它允许您像这样隐藏一半动画的特定元素。

@keyframes uiview-fadeIn {
0% {
    display: none;
    opacity: 0;
    max-height: 0px;
    overflow:hidden;
}

49% {
    display: none;
    opacity: 0;
    max-height: 0px;
    overflow:hidden;
}

50% {
    display: block;
    opacity: 0;
}

100% {
    display: block;
    opacity: 1;
}
}

@keyframes uiview-fadeOut {
0% {
    display: block;
    opacity: 1;
    margin-top: -20px;
}

49% {
    display: block;
    opacity: 0;
    margin-top: -20px;
}

50% {
    display: none;
    opacity: 0;
    max-height: 0px;
    overflow:hidden;
    margin: 0px 0px 0px 0px;
}

100% {
    display: none;
    opacity: 0;
    max-height: 0px;
    overflow:hidden;
    margin: 0px 0px 0px 0px;
}
}