Angular ng-src change animation

Question

I've read this post to find out how to animate the change of ng-src. This doesn't seem to work however, only the first time when loading the page.

I want to create an animation when the ng-src of an image changes, and came up with the following directive:

myApp.directive("imageChange", function ($timeout) {
    return {
        restrict: "A",
        scope: {},
        link: function (scope, element, attrs) {
            element.on("load", function () {
                $timeout(function () {
                    element.removeClass("ng-hide");
                    element.addClass("ng-show");
                }, 500); // This also is shitty, cause its a fixed value
            });
            attrs.$observe("ngSrc", function () {
                element.removeClass("ng-show");
                element.addClass("ng-hide");
            });
        }
    }
});

But it doesn't seem to animate. What should be the correct solution to animate the ng-src change?

JSFIDDLE: http://jsfiddle.net/wszk0tr1/3/

Answer 1

With one image it was fading but on top of white background. I was able to fade it on top of previous image with two images.

It works by showing the prev image and fading the new image

&.ng-hide-fade{
    opacity: 0;
   transition: 0s all linear;
  -webkit-transition: 0s all linear;
}

&.ng-show{
    opacity: 1;
   transition: 1s all linear;
  -webkit-transition: 1s all linear;
}

working fiddle here http://jsfiddle.net/bysdntox/gnf384gb/