Angular 2.如何检测组件当前是否在视口中

时间:2016-12-23 13:28:47

标签: javascript angular animation dom typescript

我想检测组件的位置。当前处于视口中,如果是,则运行触发器,该触发器在此特定组件上显示动画。

我无法找到任何“有角度”的方法。

示例app(主要组件)每个div都是app的一个独立组件:

<div id="one">ww</div>
<div id="two">aa</div>
<div id="three">rr</div>
<div id="four">asf</div>
<div id="five">Something...</div>
<div id="six">rq</div>

所以...我想检测组件五何时在视口中(出现在屏幕上)并开始为该组件设置动画。

有什么想法吗?

由于

1 个答案:

答案 0 :(得分:6)

您可以使用ng-in-viewport插件。

HTML:

<div id="five" in-viewport (inViewportAction)="action($event)">Something...</div>

组件:

action(event : any){
    if(event.value){
       //Do something here (e.g apply CSS class to start the animation)
    }
}

检查我对类似问题here的详细答案。