AngularJS animate image on src change

Question

I have an AnuglarJS app, where I load/change some images from a webservice...

Controller

.controller(\'PlayerCtrl\', function($scope, programService         


        

Answer 1

I know its late but according to @Aides answer i am posting here an working example that how can you achieve animation with change in ng-src using ngAnimateSwap (with Angular 1.5.x). I hope this helps someone in future:

HTML Markup:

  
  
  


  
  
  


  



  

    
  
  

    Current Image: {{activeImage}}
    

    Previous
    Next
  

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

Working plunker here.