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

Question

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

这是我的标记：

<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;
}

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

Answer 1

我认为它只有在 parent 被动画化时才有效。想想 ngAnimate 如何在 ng-if 删除它时保留 DOM 元素。如果不将 parent 保持在原位（即通过动画），child 将随之消失。

考虑使用 ng-animate-children="true" 并向 parent 添加某种虚拟动画，使其 child 可以保持足够长的时间以进行动画处理。

如果您在 parent 下还有其他 children 要立即 disappear/reappear，请添加更多 CSS 规则，例如：

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

Answer 2

对于任何运行遇到相同问题的人，解决方案都是关于时间我必须将动画应用于父元素，这允许 ngAnimate 将它保留在 DOM 中，而不是删除它及其子元素（查看）。

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>

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

Animating child element with ngAnimate and animate.css

javascript

css

angularjs

ng-animate

animate.css