Angular: ng-if animation not working on directive - angularjs

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