我尝试创建的体验是首先加载背景图像,然后触发动画以淡化其附加的元素。我使用ngAnimate和waitForImages在AngularJS中执行此操作。具体来说,我在<body>
:
<div ng-view="" ng-class="pageClass">
<br>
<br>
<br>
<h1 id="loading-text">Loading...</h1>
</div>
pageClass
被landing-page
设置为$routingProvider
,并且以下控制器和动画组合应该能够为我提供所需的结果:
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!
控制台日志之前触发?也许我错过了一些明显的东西,因为我已经看了很久的代码...
答案 0 :(得分:1)
虽然这是一个解决方案,但它并没有像我想要的那样使用ngAnimate,因为我猜这是Angular应用程序的方式。基本上,我遇到的问题是,一旦控制器加载视图,ng-enter
就会被解雇,无论我尝试什么,我都无法停止/延迟它。
所以我所做的就是添加一个<div>
,ng-show
使用<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
}
});
}
});
});
这样我的控制器可以像这样工作:
{{1}}
这基本上是以下两个StackOverflow答案的组合: