Question

我有一个使用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;
}

如果我将动画应用于父元素，它可以正常工作，但我需要在该子元素中使用它。有什么建议？？我知道这一定是非常直接的，但我不确定我错过了什么。先谢谢费拉斯。

Answer 1

我认为只有父母被动画才会有用。想一想ngAnimate在删除它时ng-if如何保留DOM元素。如果父母没有留在原地（即通过动画），孩子就会随之消失。

考虑使用ng-animate-children="true"并向父母添加某种虚拟动画，以便其子项可以保持足够长的时间来设置动画。

如果您希望立即消失/重新出现其他子女，请添加更多CSS规则，如：

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

Answer 2

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

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动画子元素

2 个答案: