Dav*_*ick 5 javascript css animation loading angularjs
我正在尝试创建的体验是首先加载背景图像,然后触发动画以淡化其附加的元素.我使用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!控制台日志之前触发？也许我错过了一些明显的东西,因为我已经看了很久的代码...
虽然这是一个解决方案，但它没有按照我想要的方式使用 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
}
});
}
});
});
这基本上是以下两个 StackOverflow 答案的组合：
| 归档时间： |
|
| 查看次数： |
196 次 |
| 最近记录： |