javascript - 加载时淡入图像

Question

我有一个 angular js 指令，它在加载图像时替换图像

.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!');
      });
    }
  };
})

还有我的图片标签

<img src="img/default.png" img-on-load>

这很好用，但是我要在替换默认图像时添加淡入淡出效果。我认为如果我只是为了这个任务引入 ngAnimate 就太过分了——它可以通过 angular 或一些简单的 CSS 在本地完成吗？

感谢任何帮助!

Answer 1

试试这个代码

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){
      console.log("loaded "+(scope.count+1)+" time");
      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;
      }
      });
    }
  };
});

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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>