All geek questions in one place

Fire $ ngAnimate enter after promise

The experience I'm trying to create is one where the background image is loaded first, then the animation starts to disappear in the element to which it is attached. I do this in AngularJS using ngAnimate and waitForImages . In particular, I have the following view in my <body> :

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

Where pageClass set landing-page to $routingProvider , and the following combination of controller and animation should give me the desired result:

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

And here are my SASS (scss) classes:

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

The behavior that I am experiencing is that after the text Loading... I get waiting... in the console while displaying an element with an unloaded background image, and then cool it fired! . I looked at the $ animate and $ animateCss docs for hints and it seems to me that I use them correctly and they just don't work as described. If $animate.on('enter',...) should run after input animation, why does it run before the console log loaded the image! ? Perhaps I am missing something obvious, as I have been looking at this piece of code for too long ...

+5
source share
1 answer

While this solution, it does not use ngAnimate the way I want, because I assume it is an Angular application. Basically, the problem I ran into was that ng-enter started as soon as the controller loaded the view, and no matter what I tried, I could not stop / delay it.

So, I added: <div> , which used ng-show for my presentation like this:

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

Thus, my controller could work as follows:

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

What is a combination of the following two StackOverflow answers:

Angular.js controller initialization delay

Running code after AngularJS animation completes

+1
source

Source: https://habr.com/ru/post/1247445/

More articles:


All Articles