Question

我试图将一些css动画应用到我的视图中的某些元素，当它们在 waypoints.js 的帮助下到达窗口顶部（偏移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 刷新页面才能发挥其魔力。如果有解决方案，请告诉我。

非常感谢任何帮助。感谢。

Answer 1

能够找到解决此问题的方法。 Waypoint要求我们在每次更改DOM时调用函数（Waypoint.refreshAll()），在我们的情况下更改视图内容。

添加$viewContentLoaded事件侦听器（在父控制器中），以便在视图发生更改时调用该方法。

$scope.$on('$viewContentLoaded', function(event){

          $timeout(function() {
              Waypoint.refreshAll()
          },0);
      });

希望这有助于其他人。

Waypoints.js无法正常工作

1 个答案: