Ogień $ ngAnimate Wprowadź po spełnieniu obietnicy

Doświadczenie, które próbuję utworzyć, to takie, w którym najpierw ładowany jest obraz tła, a następnie aktywowana jest animacja, aby zaniknąć w elemencie, do którego jest przyłączony. Robię to w AngularJS przy użyciu ngAnimate i waitForImages. Konkretnie mam następujący widok w moim <body>:

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

Gdzie pageClass jest ustawiony na landing-page przez $routingProvider i następującą kombinację kontroler i animacja mają mi dać pożądanego rezultatu:

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

I tutaj są moje klasy 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%; 
    } 
}

Zachowanie, którego doświadczam, jest że po zniknięciu tekstu Loading... otrzymuję waiting... w konsoli z jednoczesnym wyświetlaniem elementu z niezapełnionym obrazem tła, a następnie cool it fired!. Przetrząsałem dokumenty $ animate i $ animateCss dla wskazówek i wygląda na to, że używam ich poprawnie, a one po prostu nie działają zgodnie z opisem. Jeśli $animate.on('enter',...) ma uruchamiać się po animacji Enter, dlaczego uruchamia się przed dziennikiem konsoli loaded the image!? Być może brakuje mi czegoś oczywistego, ponieważ zbyt długo przyglądam się temu fragmentowi kodu ...

Źródło

2016-04-19 ArtlyticalMedia

Chociaż jest to rozwiązanie, nie korzysta z ngAnimate tak, jak chcę, ponieważ wydaje mi się, że jest to sposób Angular są aplikacje. Zasadniczo problem polegał na tym, że ng-enter został zwolniony, gdy tylko kontroler ładował widok i bez względu na to, co próbowałem, nie mogłem go zatrzymać/opóźnić.

Więc co zrobiłem było dodać <div> że używany ng-show moim zdaniem tak:

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

ten sposób mój kontroler może działać tak:

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

który jest w zasadzie połączenie StackOverflow dwa następujące odpowiedzi:

Angular.js delaying controller initialization

Running code after an AngularJS animation has completed

Źródło

2016-04-27 15:11:04 ArtlyticalMedia

Ogień $ ngAnimate Wprowadź po spełnieniu obietnicy

Odpowiedz

Powiązane problemy