Fire $ ngAnimate在承诺履行后进入

Question

The experience I'm trying to create is one where a background image is first loaded, then an animation is triggered to fade in the element it is attached to. 我正在尝试创建的体验是首先加载背景图像，然后触发动画以淡化其附加的元素。 I am doing this in AngularJS using ngAnimate and waitForImages . 我使用ngAnimate和waitForImages在AngularJS中执行此操作。 Specifically, I have the following view in my <body> : 具体来说，我在<body>有以下视图：

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

Where pageClass is set to landing-page by $routingProvider and the following controller and animation combination are supposed to give me the desired result: 其中pageClass被$routingProvider设置为landing-page ，并且以下控制器和动画组合应该给我所需的结果：

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 classes (scss): 这是我的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%;
  }
}

The behavior I am experiencing is that after the Loading... text disappears, I get waiting... in the console with simultaneous showing of the element with the background image not loaded completed, then cool it fired! 我遇到的行为是，在Loading...文本消失后，我waiting...在控制台中同时显示未加载完背景图像的元素，然后cool it fired! . 。 I have scoured the $animate and $animateCss docs for clues and it looks to me that I am using them correctly and they are just not working as described. 我已经搜索了$ animate和$ animateCss文档以获取线索，并且我认为我正确使用它们并且它们只是没有按照描述工作。 If $animate.on('enter',...) is supposed to fire after the enter animation, why is it firing before the loaded the image! 如果$animate.on('enter',...)应该在输入动画后触发，为什么在loaded the image!之前它会触发loaded the image! console log? 控制台日志？ Perhaps I'm missing something obvious since I have been looking at this chunk of code for too long... 也许我错过了一些明显的东西，因为我已经看了很久的代码...

Answer 1

While this is a solution, it doesn't use ngAnimate the way I want because I guess that's the way Angular apps are. 虽然这是一个解决方案，但它不会按照我想要的方式使用ngAnimate，因为我猜这是Angular应用程序的方式。 Basically, the problem I was experiencing was that ng-enter was getting fired as soon as the controller was loading the view and no matter what I tried, I couldn't stop/delay it. 基本上，我遇到的问题是，一旦控制器加载视图， ng-enter被解雇，无论我尝试什么，我都无法阻止/延迟它。

So what I did was add a <div> that used ng-show to my view like so: 所以我做的是添加一个使用ng-show的<div> ，就像这样：

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

That way my controller could work like this: 那样我的控制器可以像这样工作：

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

Which is basically a combination of the following two StackOverflow answers: 这基本上是以下两个StackOverflow答案的组合：

Angular.js delaying controller initialization Angular.js延迟控制器初始化

Running code after an AngularJS animation has completed AngularJS动画完成后运行代码

Fire $ ngAnimate在承诺履行后进入

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-27 15:11:04

Fire $ ngAnimate在承诺履行后进入

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-27 15:11:04

解决方案1
1 已采纳 2016-04-27 15:11:04