AngularJS在src上的动画图像发生了变化

时间:2014-09-08 07:36:49

标签: angularjs angularjs-directive angularjs-scope

我有一个AnuglarJS应用程序,我从web服务加载/更改一些图像......

控制器

.controller('PlayerCtrl', function($scope, programService) {
    ....
    programService.refresh(function(data) {
        $scope.program = data;
    });
    ....

模板

<img src="{{program.image}}" />

当我的应用程序从网络服务更新时,图像会按预期更改,我只是想在发生这种情况时做出淡出/淡出,怎么能这样做?

当图像src改变时,是否可以始终进行淡出/输入?

8 个答案:

答案 0 :(得分:18)

感谢您的回复 -

我最终做到了这一点,并且有效;)

---指令---

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

---模板---

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

答案 1 :(得分:11)

使用Angular 1.5.x

更新1.5.x - ,您可以使用ngAnimateSwap来达到此效果。

答案 2 :(得分:0)

作为christoph has mentioned,您应该注意在图片来源更改时使用$watch。 但首先请确保使用ng-src而不是src用于image标记。

<image id="new" ng-src="program.image" />

$scope.$watch('program.image', function(newValue, oldValue) {
    if(newValue===oldValue) return;
    $('img#new').hide();
    $('img#new').fadeIn("slow", function() {});
})

答案 3 :(得分:0)

基于pkdkk的答案和Angular.js 1.3.6源代码,我的解决方案是这样的(CSS动画部分用于标准ngShow):

// Copied from the Angular's sources.
var NG_HIDE_CLASS = 'ng-hide';
var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';

app.directive('myFadeIn', function($animate, $timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.addClass("ng-hide");
            element.on('load', function() {
                $timeout(function () {
                    $animate.removeClass(element, NG_HIDE_CLASS, {
                        tempClasses: NG_HIDE_IN_PROGRESS_CLASS
                    });
                });
            });
        }
    }
});

答案 4 :(得分:0)

如果其他人最终想要在更改背景图片时执行动画,我会发布我最终使用的内容。

该指令假设它附加到这样的模板:

<!-- Full screen background image and scarecrow for onload event-->
<div class="full-screen-image" data-background-image="{{backgroundImageUrl}}"></div>
<img class="hidden-full-screen-image hidden" data-ng-src="{{backgroundImageUrl}}"></div>

我们要为<div>设置背景图像源,但附加一个onload事件,以便我们知道新图像何时到达。为此,我们使用<img> .hidden.hidden {display: none;}。然后我们使用以下指令动态设置div的背景图像源,并在图像更改时执行淡入淡出白色然后从白色返回:

/***
*
* Directive to dynamically set background images when 
* controllers update their backgroundImageUrl scope
* variables
*
* Template: <div data-background-image="{{backgroundImageUrl}}" />
*   AND     <img data-background-image="{{backgroundImageUrl}}" class="image-onload-target hidden" />
*
***/

var angular = require('angular');

angular.module('BackgroundImage', [])
  .directive('backgroundImage', [
    "$timeout",
  function ($timeout) {
  return function(scope, element, attrs){
    attrs.$observe('backgroundImage', function(value) {

      /***
      *
      * Define a callback to trigger once the image loads.
      * The value provided to this callback = the value
      * passed to attrs.$observe() above
      *
      ***/

      var imageLoadedCallback = function(value) {
        // once the image load event triggers, remove the event
        // listener to ensure the event is called only once
        fadeOut();
        target.removeEventListener('load', imageLoadedCallback);
        $timeout(function() {
          fadeIn(value);
        }, 700);
      }

      /***
      *
      * Define fade in / out events to be called once a new image
      * is passed to the attrs.backgroundImage in the directive
      *
      ***/

      var fadeOut = function() {
        element.css({'opacity': '0'})
      };

      var fadeIn = function(value) {
        element.css({
          'background': 'url(' + value +') no-repeat center center fixed',
          'background-size' : 'cover',
          'opacity': '1'
        });
      };

      // add an onload event to the hidden-full-screen-image
      var target = document.querySelector('.image-onload-target');
      target.addEventListener('load', imageLoadedCallback(value));

    });
  };
}]);

使用Angular让我更爱React了......

答案 5 :(得分:0)

我知道它已经很晚但是根据@Aides的回答我在这里发布了一个工作示例,你怎么能使用ng-src(使用Angular 1.5.x)在ngAnimateSwap中实现变化。我希望这对未来的人有所帮助:

HTML标记:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-ngAnimateSwap-directive-production</title>
  <link href="animations.css" rel="stylesheet" type="text/css">


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>
  <script src="script.js"></script>


  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>

<body ng-app="ngAnimateSwapExample" ng-controller="AppCtrl">
  <div class="container">
    <img ng-animate-swap="activeImage" class="cell swap-animation" ng-src="{{activeImage}}" alt="My Active Image" />
  </div>
  <div>
    Current Image: {{activeImage}}
    <br />
    <button ng-click="previous()">Previous</button>
    <button ng-click="next()">Next</button>
  </div>
</body>

</html>

JS (script.js)

(function(angular) {
  'use strict';
  angular.module('ngAnimateSwapExample', ['ngAnimate'])
    .controller('AppCtrl', ['$scope', '$timeout', function($scope, $timeout) {

      var baseUrl = "http://lorempixel.com/400/200/sports";
      $scope.images = [];
      $scope.startIndex = 0;
      for (var i = 0; i < 5; i++) {
        $scope.images.push(baseUrl + "/" + i);
      }

      $scope.activeImage = $scope.images[$scope.startIndex];
      /*
            $interval(function() {
              $scope.startIndex++;
              if($scope.images[$scope.startIndex] && $scope.images[$scope.startIndex] != undefined){
                  $scope.activeImage = $scope.images[$scope.startIndex];  
              }

            }, 2000);
        */
      $scope.previous = function() {

        $scope.startIndex--;
        $timeout(function() {
          if ($scope.images[$scope.startIndex] && $scope.images[$scope.startIndex] !== undefined) {
            $scope.activeImage = $scope.images[$scope.startIndex];
          }
        }, 500);

      };

      $scope.next = function() {
        $scope.startIndex++;
        $timeout(function() {
          if ($scope.images[$scope.startIndex] && $scope.images[$scope.startIndex] !== undefined) {
            $scope.activeImage = $scope.images[$scope.startIndex];
          }
        }, 500);
      };
    }]);
})(window.angular);

工作人员here

答案 6 :(得分:0)

我对此问题的解决方案是观察ng-src的更改并使用超时函数添加一个执行fadeIn效果的类。

<强> HTML

<img ng-src="your-logic-will-go-here" class="animate-show ng-hide-add" fade-in>

角色代码

.directive('fadeIn', function($timeout){
    return {
        restrict: 'A',
        link: function($scope, $element, attrs){
            $scope.$watch('selectedFormat.name', function(newValue, oldValue) {
                if(newValue!=oldValue) {
                    $element.removeClass("ng-hide-add");
                    $element.addClass("ng-hide-remove");
                    $timeout(function () {
                        $element.addClass("ng-hide-add");
                    }, 100);
                }
            })
        }
    };
})

<强> CSS

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
        display: inline-block !important;
    }
    .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove {
        opacity: 0;
    }
    .animate-show.ng-hide-add{
      transition: all linear 0.7s;
    }
    .animate-show.ng-hide-add, .animate-show.ng-hide-remove.ng-hide-remove-active {
        opacity: 1;
    }

答案 7 :(得分:-1)

您无法为img src更改制作动画。但是,您可以拥有多个图像并为其不透明度设置动画。

HTML /角度模板

<div class="image-container">
    <img src="image-one.jpg" ng-show="showImageOne">
    <img src="image-two.jpg" ng-show="showImageTwo">
</div>

CSS

.image-container {
    position: relative;
}

.image-container img {
    position: absolute;
    transition: 1s opacity linear;
}

.image-container img.ng-hide {
    display: block!important;
    opacity: 0;
}