AngularJS animiert Bild src ändern

Danke für die Antworten -

Landete ich, dies zu tun, und es funktioniert 😉

- - - - Richtlinie ---

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

- - - - Vorlage ---

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

InformationsquelleAutor pkdkk

Basierend auf pkdkk Antwort und die Angular.js 1.3.6 Quellen, meine Lösung ist als solche (die CSS-animation Teil ist wie für die standard -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
                    });
                });
            });
        }
    }
});

InformationsquelleAutor Vladius

In Fall andere Ende, hier oben zu wollen, führen Sie Animationen auf den Wechsel der hintergrund-Bild, das ich poste, was ich am Ende mit.

Dieser Richtlinie davon ausgegangen, dass es verbunden ist, um eine Vorlage wie diese:

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

Wir wollen das Bild im hintergrund-Quelle für die <div>, aber befestigen Sie ein onload-Ereignis, damit wir wissen, Wann das neue Bild angekommen ist. Das zu tun, verwenden wir eine <img> mit einem .hidden Klasse, hat .hidden {display: none;}. Dann haben wir die folgende Anweisung verwenden, um dynamisch einstellen der div-hintergrund-Bild-Quelle, und führen Sie eine fade zu weiß, dann wieder von weiß auf Bild ändern:

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

    });
  };
}]);

Arbeiten mit Kantigen macht mich zu lieben, Reagieren die mehr...

InformationsquelleAutor duhaime

Meine Lösung für dieses problem ist es, zu beobachten, für änderungen auf ng-src und über eine timeout-Funktion, um eine Klasse, die die fadeIn-Effekt.

HTML

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

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

InformationsquelleAutor Arun