Fire $ ngAnimato immettere dopo che la promessa è stata soddisfatta

L'esperienza che sto cercando di creare è quella in cui viene caricata per la prima volta un'immagine di sfondo, quindi viene attivata un'animazione per dissolvere l'elemento a cui è collegata. Lo sto facendo in AngularJS usando ngAnimate e waitForImages. In particolare, ho il seguente vista nel mio <body>:

<div ng-view="" ng-class="pageClass"> 
    <br> 
    <br> 
    <br> 
    <h1 id="loading-text">Loading...</h1> 
</div>

Dove pageClass è impostato su landing-page dal $routingProvider e la seguente combinazione di controllo e di animazione suppone di darmi il risultato desiderato:

myModule.controller('LandingPageCtrl', ['$timeout', '$animate', function ($timeout, $animate) { 
    $animate.on('enter', angular.element('.ng-scope'), function (element) { 
    console.log('cool it fired!'); 
    }); 
}]).animation('.landing-page', ['$animateCss', function ($animateCss) { 
    return { 
    enter: function(element, doneFn) { 
     console.log('waiting...'); 
     element.waitForImages(true).done(function() { 
     console.log('loaded the image!'); 

     return $animateCss(element, { 
      event: 'enter', 
      structural: true 
     }); 
     }); 
    } 
    }; 
}]);

E ecco i miei corsi SASS (scss):

.landing-page { 
    &.ng-enter { 
      transition: opacity 1s; 
    -webkit-transition: opacity 1s; 
    } 

    &.ng-leave { 
      transition: opacity 3s, left 1s ease; 
    -webkit-transition: opacity 3s, left 1s ease; 
    } 

    &.ng-enter, 
    &.reverse.ng-leave-active { 
    opacity: 1; 
    left: 0; 
    } 

    &.ng-enter-active, 
    &.ng-leave, 
    &.reverse.ng-enter-active, 
    &.reverse.ng-leave { 
    opacity: 0; 
    left: 0; 
    } 

    &.ng-leave-active, 
    &.reverse.ng-enter { 
    opacity: 0; 
    left: -100%; 
    } 
}

Il comportamento che sto vivendo è che dopo che il testo Loading... scompare, ottengo waiting... nella console con la visualizzazione simultanea dell'elemento con l'immagine di sfondo non caricata completata, quindi cool it fired!. Ho setacciato i documenti $ animate e $ animateCss per gli indizi e mi sembra che li sto usando correttamente e che non funzionano come descritto. Se si suppone che $animate.on('enter',...) venga attivato dopo l'animazione di inserimento, perché viene attivato prima del log della console loaded the image!? Forse mi manca qualcosa di ovvio visto che ho visto questo pezzo di codice per troppo tempo ...

fonte

2016-04-19 ArtlyticalMedia

Mentre questa è una soluzione, non usa ngAnimate nel modo che voglio perché immagino che sia il modo angolare le app sono. Fondamentalmente, il problema che stavo vivendo era che ng-enter veniva sparato non appena il controller stava caricando la vista e non importa cosa ho provato, non potevo fermarlo/ritardarlo.

Quindi quello che ho fatto è stato aggiungere un <div> che ha usato ng-show al mio punto di vista in questo modo:

<div ng-show="waitForBackground"> 
    <h1 class="intro-text">Some text</h1> 
    <p>and content</p> 
</div>

In questo modo il mio controller potrebbe funzionare in questo modo:

myAppOrWhatever.controller('LandingPageCtrl', function ($timeout, $animate, $scope) { 
    $scope.waitForBackground = false; 

    $timeout(function() { 
    angular.element('.landing-page div').waitForImages(true).done(function() { 
     $scope.waitForBackground = true; 
     $scope.$apply(); 
    }); 

    $scope.$watch('waitForBackground', function() { 
     if($scope.waitForBackground === true) { 
     $animate.on('removeClass', angular.element('.landing-page div'), function (element, phase) { 
      if(phase === 'close') { 
      // do some stuff after the animation is completed 
      } 
     }); 
     } 
    }); 
    });

che è fondamentalmente una combinazione di le seguenti due risposte StackOverflow:

Angular.js delaying controller initialization

Running code after an AngularJS animation has completed

fonte

2016-04-27 15:11:04 ArtlyticalMedia

Fire $ ngAnimato immettere dopo che la promessa è stata soddisfatta

risposta

Problemi correlati