JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div ng-app='demo'>
    <div ng-init="count=0">
      <img id="imgID" src="https://dummyimage.com/600x400/000/fff" img-on-load>
    </div>
</div>

CSS

.imgInitial {
    opacity: 0;
-webkit-transition: opacity 2s ease-out;
transition: opacity 2s ease-out;
}
.imgAnimate {
    opacity: 1;
    -webkit-transition: opacity 3s ease-in;
    transition: opacity 3s ease-in;
}

JavaScript

var demo = angular.module('demo', []);
demo.directive('imgOnLoad', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.on('load', function() {
      if(scope.count==0){
      setTimeout(function(){ 
      	$('#imgID').addClass('imgInitial');
      }, 1000);
      setTimeout(function(){ 
        element[0].src = "https://dummyimage.com/600x400/F7921E/fff";
      	$('#imgID').addClass('imgAnimate');
        $('#imgID').removeClass('imgInitial');
      }, 3000);
      scope.count=1;
      }
      });
    }
  };
});