Javascript AngularJS$animate未在指令中添加CSS类

我正在尝试用angularJS向站点添加一些动画。这是我第一次使用angular，但我无法找出问题所在

创意

当我在图像上悬停时，它应该以某种方式高亮显示

方法

a） 编写我自己的指令：

app.directive('highlighting', ['$animate', function($animate) {
    return function(scope, element, attrs) {
        element.on('mouseenter', function() {
            $animate.removeClass(element, 'mouseleave');
            $animate.addClass(element, 'mouseenter');

            console.log("enter"); //this works
        });
        element.on('mouseleave', function() {
            $animate.removeClass(element, 'mouseenter');
            $animate.addClass(element, 'mouseleave');

            console.log("leave"); //yup, also firing 
        });
    };
}]);

b） 添加CSS类：

.home-img {
opacity: 0;
}

.home-img.mouseover {
-webkit-animation: 0.5s fade-in;
-moz-animation: 0.5s fade-in;
-o-animation: 0.5s fade-in;
animation: 0.5s fade-in;
z-index: 100;
}

.home-img.mouseleave {
-webkit-animation: 0.5s fade-out;
-moz-animation: 0.5s fade-out;
-o-animation: 0.5s fade-out;    
animation: 0.5s fade-out;
z-index:99;
}

@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@-webkit-keyframes fade-out {
from { opacity: 1; }
to { opacity: 0; }
}

c） 最后。通过html将内容整合在一起：

<img src="my.jpg" class="img-responsive center-block no-margin home-img" ng-class="" id="img_how" highlighting>

你似乎可以使用css:hover来实现你想要做的事情？是的，我知道，但这更像是使用角度动画测试的开始。