Lửa $ ngAnimate nhập sau khi lời hứa hoàn thành

Trải nghiệm tôi đang cố gắng tạo là hình ảnh nền được tải lần đầu tiên, sau đó hoạt ảnh được kích hoạt để mờ dần trong phần tử được đính kèm. Tôi đang làm điều này trong AngularJS sử dụng ngAnimate và waitForImages. Cụ thể, tôi có quan điểm sau đây trong <body> tôi:

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

đâu pageClass được thiết lập để landing-page bởi $routingProvider và bộ điều khiển và hình ảnh động kết hợp sau đây có nghĩa vụ phải cung cấp cho tôi những kết quả mong muốn:

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

Và đây là các lớp SASS của tôi (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%; 
    } 
}

Hành vi tôi đang gặp là sau khi văn bản Loading... biến mất, tôi nhận được waiting... trong bảng điều khiển với hiển thị đồng thời phần tử với hình nền không được tải xong, sau đó cool it fired!. Tôi đã cọ rửa các tài liệu $ animate và $ animateCss cho các manh mối và có vẻ với tôi rằng tôi đang sử dụng chúng một cách chính xác và chúng không hoạt động như mô tả. Nếu $animate.on('enter',...) được cho là sẽ kích hoạt sau khi nhập hoạt ảnh, tại sao nó lại kích hoạt trước nhật ký bảng điều khiển loaded the image!? Có lẽ tôi đang thiếu một cái gì đó rõ ràng kể từ khi tôi đã nhìn vào đoạn mã này quá lâu ...

Nguồn

2016-04-19 ArtlyticalMedia

Trong khi đây là một giải pháp, nó không sử dụng ngAnimate theo cách tôi muốn bởi vì tôi đoán đó là cách góc ứng dụng. Về cơ bản, vấn đề tôi gặp phải là ng-enter đã bị sa thải ngay khi bộ điều khiển đang tải chế độ xem và bất kể tôi đã thử gì, tôi không thể dừng/trì hoãn nó.

Vì vậy, những gì tôi đã làm là thêm một <div> rằng sử dụng ng-show đến quan điểm của tôi như vậy:

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

Bằng cách đó điều khiển của tôi có thể làm việc như thế này:

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

cơ bản Đó là một sự kết hợp của hai StackOverflow sau đây trả lời:

Angular.js delaying controller initialization

Running code after an AngularJS animation has completed

Nguồn

2016-04-27 15:11:04 ArtlyticalMedia

Lửa $ ngAnimate nhập sau khi lời hứa hoàn thành

Trả lời

Các vấn đề liên quan