承诺完成后触发 $ngAnimate 进入
Posted
技术标签:
【中文标题】承诺完成后触发 $ngAnimate 进入【英文标题】：Fire $ngAnimate enter after promise fulfilled 【发布时间】：2016-08-11 22:50:39 【问题描述】：我正在尝试创建的体验是首先加载背景图像，然后触发动画以淡入它所附加的元素。我正在使用 ngAnimate 和 waitForImages 在 AngularJS 中执行此操作。具体来说，我在<body> 中有以下观点：
<div ng-view="" ng-class="pageClass">
<br>
<br>
<br>
<h1 id="loading-text">Loading...</h1>
</div>
$routingProvider 将 pageClass 设置为 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! 控制台日志之前触发？也许我错过了一些明显的东西，因为我已经查看这段代码太久了......
【问题讨论】：
【参考方案1】：虽然这是一个解决方案，但它并没有按照我想要的方式使用 ngAnimate，因为我猜这就是 Angular 应用程序的方式。基本上，我遇到的问题是 ng-enter 在控制器加载视图后立即被触发，无论我尝试什么，我都无法停止/延迟它。
所以我所做的就是在我的视图中添加一个使用 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
);
);
);
这基本上是以下两个 *** 答案的组合：
Angular.js delaying controller initialization
Running code after an AngularJS animation has completed
【讨论】：
以上是关于承诺完成后触发 $ngAnimate 进入的主要内容，如果未能解决你的问题，请参考以下文章