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

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
                    });
                });
            });
        }
    }
});