Vue.jsで可視化範囲に入った時に順番にフェードさせたい

Question

Vu.jsを使用して、可視化範囲(画面領域)に入った際にコンテンツの中のものを順番にフェードしたいです。

こちら作りかけの物ですが、動きはこんな感じです。
https://jsfiddle.net/seishirou/a8s3wh9z/
この動きを可視化範囲に入った際に動かしたいのですが、Vueで記述する際はどのような記述になるのでしょうか?

Answer 1

昔、可視化範囲にはいったら線を引くコンポーネントを作りました。

• Vue.js Highlighter - Codepen

解説記事はこちらに書きました。

• CSS と Vue でマーカーを引いてみる