Question

我的页面分为几个部分：＃page-1和＃page-2

见Plnkr：http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi

<body>
    <section id="page-1">
       This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
     </section>

    <section id="page-2">
       <span class="animated bounce">This is page 2  </span>       
     </section>
</body>

动画类正在应用于＃page-2中的不同元素。但是，当用户向下滚动到这些元素时，动画已经完成。因此它们看起来就像静态物体。

无论如何，我可以检测到＃page-2当前正在被查看的时间，然后调用addClass（'animated bounce'）函数到某些元素？

如果可能的话，我想在angularjs中实现这个目标

Answer 1

我找到了一个angularjs指令，在这种情况下可能对你有所帮助。 Inview尝试通过向您报告屏幕上是否显示dom元素来尝试解决此问题。不幸的是我无法测试我的解决方案，因为我找不到Inview的缩小的js文件，但是我收集了一些应该有效的代码：

<section id="page-2" in-view="{$inview ? isFocused=true;}">

   <div ng-class="{'animated bounce': isFocused}">This is page 2 </div>

</section>

只要元素在浏览器中可见，$inview就应该为true。这导致范围变量isFocused被设置为true，因此动画类被添加到div中。

这应该像你在你的问题中所预期的那样工作，如果由于某种原因它不起作用请告诉我，以便我可以改进我的答案。

检测正在AngularJs中查看的页面滚动/当前部分

1 个答案: