AngularJS anime l'image sur le changement src

Merci pour les réponses -

J'ai fini par faire ça, et ça fonctionne 😉

--- Directive ---

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

--- Modèle ---

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

Basé sur pkdkk la réponse de l'Angular.js 1.3.6 sources, ma solution est en tant que tel (le CSS de la partie animation est aussi utilisé pour la norme 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
                    });
                });
            });
        }
    }
});

Dans le cas où d'autres l'envie de réaliser des animations sur modifier l'image de fond, je vais poster ce que j'ai fini de l'utiliser.

La présente directive suppose qu'il est attaché à un modèle comme celui-ci:

<!-- 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>

Nous voulons définir l'arrière-plan de l'image source pour la <div>mais attacher un événement onload donc nous savons que lorsque la nouvelle image est arrivé. Pour ce faire, nous utilisons un <img> avec un .hidden classe qui a .hidden {display: none;}. Ensuite, nous utilisons la directive suivante pour définir dynamiquement les div à l'arrière-plan de l'image source et effectuer un fondu au blanc, puis le dos de blanc sur le changement d'image:

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

    });
  };
}]);

De travail Angulaire me fait l'amour Réagir d'autant plus...

Ma solution à ce problème est à l'affût de changements sur ng-src et à l'aide d'une fonction de délai pour ajouter une classe qui ne le fadeIn effet.

HTML

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

Angulaire Code

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