web-dev-qa-db-ja.com

Angular 2。コンポーネントが現在ビューポートにあるかどうかを検出する方法

コンポーネントの位置を検出したいのですが。現在ビューポートにあり、はいの場合、この特定のコンポーネントのアニメーションを統計するトリガーを実行します。

私はそれを行うための「角度のある」方法を見つけることができません。

サンプルapp（メインコンポーネント）すべてのdivは、アプリの個別のコンポーネントです。

<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がビューポート（画面に表示されている）にあることを検出し、そのコンポーネントのアニメーション化を開始したいと思います。

何か案は？

ありがとう

javascriptangularanimationdomtypescript
9
Radek

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)
    }
}

同様の質問で私の詳細な答えを確認してください ここ 。

7
adrianmanduc