Angular: ng-if animation not working on directive

Question

I'm using Angular 1.3 and animate.css.

I'm trying to apply a simple fadeIn/out animation on a directive i have using this code:

.vl-fade-in-out{
    &.ng-enter{
        animation: fadeIn 1s;
    }

    &.ng-leave{
        animation:  fadeOut 1s;
    }

}

But no animation is applied, however, the same animation does apply if i use it directly on a html element (like div).

//this is not animating
<my-directive class="vl-fade-in-out" ng-if="show"></my-directive>
//this is animating
<div class="vl-fade-in-out" ng-if="show"></div>

Also if i apply fadeIn/out effect using transition it works even when applied on the directive:

.vl-fade-in-out{
    &.ng-enter{
        transition:1s linear all;
        opacity: 0;

        &.ng-enter-active{
            opacity: 1;
        }
    }

    &.ng-leave{
            transition:1s linear all;
            opacity: 1;
        &.ng-leave-active{
            opacity: 0;
        }
    }


}

Am I doing something wrong?

Pen: http://codepen.io/anon/pen/aOLzGE

Answer 1

@Claies was right in his second comment.

<my-directive> is not a recognized element in Chrome so it does not assign it any default attributes that you would expect. Assigning display: block to my-directive or .vl-fade-in-out will allow it to be animated.

Or you could use replace: true in the myDirective return in order to replace the custom element with the content of the template if your content contains a normal element.

Answer 2

Use restrict:'C' with <div class="test">. it will work