Animating child element with ngAnimate and animate.css

Question

I have an app that uses Angular 1.5, and I'm using ngAnimate and animate.css to handle simple animations. I'm running into an issue where I need to animate a child element and ng-enter/leave is applied to its parent via ng-if.

Here is my markup:

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

Here is the css:

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

If I apply the animation to the parent element it works just fine, but I need it in that child element. Any suggestions?? I know this must be something pretty straight forward but I'm not sure what I'm missing. Thanks in advance fellas.

Answer 1

I think it would only work if the parent is being animated. Think about how ngAnimate keeps the DOM element around when ng-if is removing it. Without the parent being kept in place (ie. by animation), the child would disappear with it.

Consider using ng-animate-children="true" and adding some kind of dummy animation to the parent so its child can stay around long enough to be animated.

If you have other children under parent that you want to disappear/reappear immediately, add some more CSS rules like:

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

Answer 2

For anyone running into the same issue, the solution was all about timing I had to apply an animation to the parent element, this allowed ngAnimate to keep it in the DOM, not removing it along with its child elements (Look at https://stackoverflow.com/a/38878432/6301843).

The css ended up looking like this:

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

Also you will need to add this ng-animate-children="true" to your markup. So my HTML ended up looking like this:

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