我使用这个 Controller 来抓取博客文章:
appCtrl.controller('NewsCtrl', ['$scope', '$http',
function ($scope, $http) {
var posts = [];
$http.get("https://www.googleapis.com/blogger/v3/blogs/BLOG_ID/posts?&key=MY-API-KEY")
.then(function (response) {
posts = response.data;
$scope.items = posts.items;
});
console.log($scope);
}
]);
然后像这样在页面上显示它们:
<div ng-repeat="item in items" class="repeat_animation" animate-on-load>
<h2>{{item.title}}</h2>
<span ng-bind-html="item.content"></span>
</div>
我有以下 CSS 来为每个返回的帖子设置动画:
.repeat_animation {
&.ng-enter-stagger,
&.ng-leave-stagger,
&.ng-move-stagger {
-webkit-transition-delay: .2s;
transition-delay: .2s;
transition-duration: 0s;
-webkit-transition-duration: 0s;
}
&.ng-enter,
&.ng-leave,
&.ng-move {
-webkit-transition: .5s ease-in-out all;
transition: .5s ease-in-out all;
}
&.ng-leave.ng-leave-active,
&.ng-enter,
&.ng-move {
opacity: 0;
}
&.ng-leave,
&.ng-move.ng-move-active,
&.ng-enter.ng-enter-active {
opacity: 1;
}
}
如果我直接加载/重新加载新闻 View ,这些元素会按顺序进行动画处理,但如果我更改为不同的页面 View 然后再次返回,它们会同时进行动画处理。
然而,通过调用以下指令,每次我从一个页面 View 导航到新闻 View 时,它们都会动画化,但如果我重新加载页面而不从另一个 View 导航到它,它们就不会动画化。
app.directive('animateOnLoad', ['$animateCss', function ($animateCss) {
return {
'link': function (scope, element) {
$animateCss(element, {
'event': 'enter',
structural: true
}).start();
}
};
}]);
如何强制帖子在每次访问页面 View 时始终按顺序显示动画,无论是直接访问还是在 View 更改时?
最佳答案
最后,我可以在页面加载和 View 更改上惊人地工作的唯一方法是在指令中设置 from/to 不透明度样式,如下所示:
app.directive('animateOnLoad', ['$animateCss', function ($animateCss) {
return {
'link': function (scope, element) {
$animateCss(element, {
event: 'enter',
structural: true,
from: { 'opacity': 0 },
to: { 'opacity': 1 }
}).start();
}
};
}]);
我无法使用样式表中的 css 类让它工作(间歇性地使用 angular-animate.js 版本 1.4.3 除外)
关于javascript - AngularJS $animateCss 在页面加载和 View 更改上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35682811/