我试图借助waypoints.js将一些CSS动画应用于视图中的某些元素,使其到达窗口顶部(偏移70%)。
我创建了一个指令,如下所示。
angular.module("myApp")
.directive("clWaypoints",function(){
return{
restrict:"A",
link: function(scope,element,attrs)
{
var wayp=new Waypoint({
element:element,
handler:function(direction){
if(direction=="down")
{
var animation = scope.$eval(attrs.clWaypoints).animation;
element.css('opacity', '1');
element.addClass("animated " + animation);
}
},
offset:'70%',
})
}
}
})
以下是我的app.js文件
angular
.module('myApp', [
'ngRoute',
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: "mainCtrl"
})
.when('/about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
});
这两个视图都包含使用
cl-waypoints="{animation:'fadeInUp'}"
指令的元素。当应用程序加载到浏览器上时,动画将按预期工作,但是当我导航到另一个视图并开始向下滚动时,该视图中的元素将不进行动画处理。无论如何,如果我刷新页面,它就可以正常工作。
似乎需要刷新页面才能使waypoint.js发挥作用。请让我知道是否有解决此问题的方法。
将不胜感激。
谢谢。
最佳答案
能够找到解决该问题的方法。 Waypoint要求我们每次对DOM进行更改时都调用一个函数(Waypoint.refreshAll()
),在本例中为更改视图内容。
添加了一个$viewContentLoaded
事件侦听器(在父控制器中),以便在视图更改时调用该方法。
$scope.$on('$viewContentLoaded', function(event){
$timeout(function() {
Waypoint.refreshAll()
},0);
});
希望这对其他人有帮助。