使用 ngAnimate 和 animate.css 为子元素设置动画答案

【问题标题】：Animating child element with ngAnimate and animate.css使用 ngAnimate 和 animate.css 为子元素设置动画
【发布时间】：2016-12-16 23:22:34
【问题描述】：

我有一个使用 Angular 1.5 的应用程序，我正在使用 ngAnimate 和 animate.css 来处理简单的动画。我遇到了一个问题，我需要为子元素设置动画，并且通过 ng-if 将 ng-enter/leave 应用于其父元素。

这是我的标记：

<div class="parent" ng-if="vm.showPanel">
  <div class="child animated"> <!--This is the element that need the animation-->
    some content
  </div>
</div>

这是css：

.parent.ng-enter > div.child{
  animation: bounceInRight 1s;
}
.parent.ng-leave > div.child{
  animation: bounceOutRight 1s;
}

如果我将动画应用于父元素，它就可以正常工作，但我需要在该子元素中使用它。有什么建议？？我知道这一定很简单，但我不确定我错过了什么。在此先感谢各位。

【问题讨论】：

你看过ng-animate-children="true"吗？
@plong0 我试过了，但没有运气：/

标签： javascript css angularjs ng-animate animate.css

【解决方案1】：

我认为它只有在父母被动画化时才会起作用。想想当ng-if 删除它时，ngAnimate 如何保留 DOM 元素。如果没有将父级保持在原位（即通过动画），子级将随之消失。

考虑使用ng-animate-children="true" 并向父级添加某种虚拟动画，以便其子级可以停留足够长的时间以进行动画处理。

如果您想要立即消失/重新出现在父级下的其他子级，请添加更多 CSS 规则，例如：

.parent.ng-leave > .other-child {
    display: none;
    visibility: hidden;
}

【讨论】：

向父元素添加动画就可以了我想要子元素的动画。谢谢！！

【解决方案2】：

对于遇到相同问题的任何人，解决方案都是关于我必须将动画应用到父元素的时间，这允许 ngAnimate 将其保留在 DOM 中，而不是将其与其子元素一起删除（查看 @ 987654321@).

css 最终看起来像这样：

.parent.ng-enter {
  animation: fadeIn 800ms;
}
.parent.ng-leave {
  animation: fadeOut 800ms;
}
.parent.ng-enter > div.child {
  animation: bounceInRight 1s;
}
.parent.ng-leave > div.child {
  animation: bounceOutRight 1s;
}

您还需要将此 ng-animate-children="true" 添加到您的标记中。所以我的 HTML 最终看起来像这样：

<div ng-if="vm.someConditional" ng-animate-children="true" class="parent">
  <div class="child">Content</div>
</div>

【讨论】：