AngularJS animate image on src change

Question

I have an AnuglarJS app, where I load/change some images from a webservice...

Controller

.controller(\'PlayerCtrl\', function($scope, programService         


        

Answer 1

Thanks for the responses -

I ended up doing this, and it works ;)

--- Directive ---

.directive('fadeIn', function($timeout){
    return {
        restrict: 'A',
        link: function($scope, $element, attrs){
            $element.addClass("ng-hide-remove");
            $element.on('load', function() {
                $element.addClass("ng-hide-add");
            });
        }
    };
})

--- Template ---

<img ng-src="{{program.image}}" class="animate-show" fade-in />

--- CSS ---

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
    transition: all linear 0.5s;
    display: block !important;
}

.animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove {
    opacity: 0;
}

.animate-show.ng-hide-add, .animate-show.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

Answer 2

Based on pkdkk's answer and the Angular.js 1.3.6 sources, my solution is as such (the CSS animation part is as used for standard ngShow):

// Copied from the Angular's sources.
var NG_HIDE_CLASS = 'ng-hide';
var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';

app.directive('myFadeIn', function($animate, $timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.addClass("ng-hide");
            element.on('load', function() {
                $timeout(function () {
                    $animate.removeClass(element, NG_HIDE_CLASS, {
                        tempClasses: NG_HIDE_IN_PROGRESS_CLASS
                    });
                });
            });
        }
    }
});