angularjs image fade in , change

from: http://stackoverflow.com/questions/25719408/angularjs-animate-image-on-src-change

accepted

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