Daniel Perez Daniel Perez - 1 year ago 156
AngularJS Question

Animating child element with ngAnimate and animate.css

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

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 Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download