在承诺履行后触发 $ngAnimate enter

Question

我尝试创建的体验是首先加载背景图像，然后触发动画以淡入它所附加的元素。我在 AngularJS 中使用 ngAnimate 和 waitForImages 执行此操作。具体来说，我的 <body> 中有以下视图：

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

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

这是我的 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%;
  }
}

我遇到的行为是 Loading... 文本消失后，我在控制台中得到 waiting...，同时显示未加载背景图像的元素已完成，然后 cool it fired!.我已经搜索了 $animate 和 $animateCss 文档以寻找线索，在我看来我正确地使用了它们并且它们只是没有按照描述的那样工作。如果 $animate.on('enter',...) 应该在进入动画之后触发，为什么它会在 loaded the image! 控制台日志之前触发？也许我遗漏了一些明显的东西，因为我查看这段代码太久了...

Answer 1

虽然这是一个解决方案，但它并没有按照我想要的方式使用 ngAnimate，因为我猜这就是 Angular 应用程序的方式。基本上，我遇到的问题是 ng-enter 在控制器加载视图后立即被解雇，无论我尝试什么，我都无法 stop/delay 它。

所以我所做的是在我的视图中添加一个使用 ng-show 的 <div>，如下所示：

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

这样我的控制器就可以像这样工作了：

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

这基本上是以下两个 Whosebug 答案的组合：

Angular.js delaying controller initialization

Running code after an AngularJS animation has completed

在承诺履行后触发 $ngAnimate enter

Fire $ngAnimate enter after promise fulfilled

javascript

css

animation

loading

angularjs