title: Fade In an Image on Load
body: <p>I have an angular js directive that replaces an image when it is loaded </p>
  
  <pre><code>.directive('imgOnLoad', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.bind('load', function() {
          element[0].src = scope.obj.image_url;
        });
        element.bind('error', function(){
          console.log('failure!');
        });
      }
    };
  })
  </code></pre>
  
  <p>And my image tag</p>
  
  <pre><code>&lt;img src="img/default.png" img-on-load&gt;
  </code></pre>
  
  <p>This works well enough, however I'm to add a fade effect when the default image is replaced. I'm thinking it would be overkill if I brought in <code>ngAnimate</code> just for this task - can it be done natively through angular or through some simple CSS?</p>
  
  <p>Any help is appreciated!</p>