Vuejsで画面に要素が表示されたときにフェードインしたい

Question

要素が表示されたら、その要素をフェードインしたいです。
構成としては以下の通りです。

• section
• section

このとき

• this.$el.getBoundingClientRect().top

で要素の高さを取得したいのですが、さらに上に表示transitionで表示されたものがあると

mounted(){
   this.top = this.$el.getBoundingClientRect().top

と書いている部分から要素の座標がずれてしまいます。

たとえば

• section(表示されていない)
• section(表示されていない)

と

• section(表示されてた）
• section(表示された）

ものだと、二つ目のsectionのtopは座標が一つ目のsection分だけずれてしまい、単一ファイルの.vueでやっているとmountedでしかthis.$elが取得できず困っています。

methods:{
    handleScroll() {
      this.visible =  window.scrollY　> this.top - (window.innerHeight / 2 )
    }
  }

どのようにすればいいでしょうか？

Answer 1

自分で座標計算するのやめて Intersection Observer を使うのが一番手っ取り早くてパフォーマンスも良いのではないかと思います。
Vue プラグインもあります。

• vue-observe-visibility
• Vue.js 表示を監視する Intersection Observer 系プラグインが便利 | Cubix

古いブラウザにも対応する場合は Polyfill を導入する必要があります。

• IntersectionObserver/polyfill

Comments

[退会済みユーザー]

Intersection Observerというもの知りませんでした。
参考にさせていただきます。ありがとうございました。

[退会済みユーザー]

うまく実装できました、ありがとうございます。