3 votes

AngularJS : Ajouter une animation lorsque la balise div est mise à jour

Je suis bloqué dans ce problème où j'ai une balise div qui se met à jour et affiche une liste d'images. Je veux ajouter une animation lorsque la valeur dans la balise div est mise à jour dans la transition d'un ensemble d'images à un autre.

entrer la description de l'image ici

Ici, comme vous pouvez le voir en bas, il y a un ensemble d'images pour les cheveux de la fille. Et lorsque l'utilisateur passe à un autre onglet, un ensemble différent d'images apparaît. Je veux une animation dans cette transition.

La partie AngularJS pour la transition est la suivante :

Où les fonctions appelées dans la partie JS mettent à jour les images en conséquence.

Alors la question est comment ajouter une animation de transition pour le même élément lorsqu'il est mis à jour car nous ne quittons jamais ou n'entrons dans cette balise d'élément

5voto

Abdullah Al Noman Points 2247

Votre question est répondue ici

Html

et dans le contrôleur var app = angular.module('app', []);

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
                scope.widthOfOutsideWrapper= this.width;
                scope.heightOfOutsideWrapper= this.height;
                scope.my_id = "testing";
            });
        }
    };
});

app.controller('c', function($scope) {
    $scope.src ="https://www.google.com.ua/images/srpr/logo4w.png";
});

et http://jsfiddle.net/2CsfZ/855/ exemple de travail est disponible ici

0voto

arqam Points 1077

La réponse ci-dessus est très utile et pourrait être d'une grande aide pour beaucoup.

Mais la réponse à ma question est que vous ne pouvez tout simplement pas. ngAnimate's ngEnter et ngLeave ne pourront pas reconnaître un changement à moins que l'élément soit modifié et non ce qu'il contient.

Alors soit un certain hack doit être appliqué comme l'utilisation de ngRepeat avec des id's différents pour différentes mises à jour qui se produisent à l'élément, soit quelque chose d'autre doit être fait.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X