淡入淡出效果AngularJS指令用于ngStyle

Question

我正在使用角度js创建一个简单的背景图像幻灯片指令。一切都很好，但是当背景图像改变时我想要一个优雅的淡入淡出效果。知道我怎么能做到这一点。代码如下

angular.module("shouvikme").directive('bgSlider', function ($interval) {
    return function (scope, element, attrs)
    {

        var bg_array = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg'];
        var i = -1;
        $interval(function ()
        {
            i>=bg_array.length-1 ? i=0 : i++;
            var bg_string = "url('assets/img/overlays/black-overlay.png'), url('assets/img/banners/" + bg_array[i] + "')";
            element.css({ 'background': bg_string });
            element.css({'background-size': 'auto, cover'});
            element.css({'background-position': 'top left, center center'});
            element.css({'background-repeat': 'repeat, no-repeat'});
            element.css({'background-attachment': 'fixed'});
        }, 5000);



    };
});