我想检测零件的位置。当前在视口(viewport)中,如果是,则运行触发器,该触发器在此特定组件上统计动画。

我找不到任何“Angular ”方法来做到这一点。

示例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>

所以...我想检测组件5何时在视口(viewport)中(显示在屏幕上)并开始对该组件进行动画处理。

有任何想法吗?

谢谢

最佳答案

您可以使用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的详细回答。

09-05 21:47
查看更多