🎃

Vueでスクロール位置を取得しフェードイン・アウト処理をする

2021/03/23に公開

Vue.js

Vueを始めている者です、いかがおすごしでしょうか？

さて、スクロール位置によって、フェードイン・アウトする処理ですが

ググると以下の情報を取得できまして、それらをもとに試行錯誤してみました

スクロール位置によって、画像をフェードイン・アウトする処理：jQuery
スクロール位置によって、コンテンツをフェードイン：Vue
ボタンによって画像をフェードイン・アウトする処理：Vue

Vueでスクロール位置によって、フェードイン・アウトする処理の
ピンポイントな情報が、なかなかみつけられなかったので
備忘録を兼ねて、ここに記述しておきたいと思います

ちなみにjQueryをVueに組み込むこともできるんですね！
それは素晴らしいと思いましたが、まずはVueのみで処理^[1]を行ってみました

まずは`jsfiddle`用に書きましたので実行結果をごらんください

実際には〇〇〇〇.vue という1ファイルに以下のすべての処理を書きました

templateタグ部分のみを書きました

<template>
　<transition>
　　<div v-show="visible">
　　　<h1 id="header-logo">ここがフェードイン・アウトするよ</h1>
　　</div>
　</transition>

　<p>いろいろ書きたいこと...夢...希望...勇気...そして、愛</p>
　.....
</template>

この<transition>が大事なようです

Vue.jsのtransitionによるアニメーションの基礎を学ぶ
で詳しく知りました。ありがとうございます

Vue.jsには、要素の表示・非表示の挙動においてアニメーションを実装していくtransition（トランジション）と呼ばれる機能があります。

divタグ内にv-show="visible"を書いて、
まずは見えているvisible状態を作ります

[Vue.js]スクロールでコンテンツがフェードインする実装
で詳しく知りました。ありがとうございます

v-showは、画面への表示、非表示の切替がCSSで行われます。つまりDOM上では常に描画された状態であり、例えばv-show="false"は、CSSでdisplay: none;が与えられて非表示になっています。

変数のvisibleはデフォルトでfalseとなっており、非表示の状態になっています、このコンポーネントでは、スクロールイベントを設定し、デフォルトで非表示の要素が一定の高さにくるとvisibleがtrueになり、表示されます。

続いてscriptの部分です

jsfiddle用の記述とは若干違い、〇〇〇〇.vueでは以下のように書きましたが、処理内容はどちらも一緒です

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  created() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY;
      if (!this.visible) {
        this.visible = window.scrollY > 100;
      } else if (window.scrollY < 90) {
        this.visible = !this.visible;
      }
    },
  },
};
</script>

Vue.jsでスクロールを検知する
で詳しく知りました。ありがとうございます

とうぜんながら、ここが一番悩んだところで、やりたかったことは、

最初は消えていて
あるスクロール位置で、消えていたものが登場する
あるスクロール位置で、登場していたものが消える

なわけですが、これをif文を使って書くことで解消されました👏

書き終わってみると単純な記述ですね

      if (!this.visible) {
        this.visible = window.scrollY > 100;
      } else if (window.scrollY < 90) {
        this.visible = !this.visible;
      }

visible: false,で表示をデフォルトで消して、かつ
!this.visibleと書くことで、!見えていない、とするわけですね

【Vue.js】クリックで要素を動的に切り替える
で詳しく知りました。ありがとうございます

ボタンのクリックによってisActiveをトグルしています。isActiveがtrueのときはfalseを、falseのときはtrueとすることで要素が切り替わります。

トグルとは、ある同じ操作を繰り返すことで、機能や状態のON/OFFを切り替える仕組みのことである。

created()に関してはまだ良くわかっていませんが
こういう👇ことだそうです

vue.jsのcreatedとmountedの違いを目で見て理解
で詳しく知りました。ありがとうございます

created, mountedはライフサイクルフックと呼ばれ、vue.jsの初期化の中の決められたタイミングで実行される関数です。各ライフサイクルフックの中にプログラムを記述することでvue.jsの初期化の流れの中で記述したプログラムを必ず実行させることができます。

CSSでフェードするアニメを作る

<style scoped>
#header-logo {
  position: fixed;
  top: 5%;
  left: 9%;
}

/* ヘッダーロゴ フェード処理ここから */
.v-enter {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}

.v-enter-to {
  opacity: 1;
}

.v-leave-to {
  opacity: 0;
  transition: opacity 1s;
}
/* ヘッダーロゴ フェード処理ここまで */
</style>

v-enter v-enter-active v-leave
と言うものがあるのですね

Vue.jsについての基礎（transitionによるアニメーション）
で詳しく知りました。ありがとうございます

ざっくり分けると、表示時はenterで、非表示時はleave系のクラスが付与されます。

脚注

多くの処理内容はこれから理解していきまして、今回はあくまでも動いたよ、という処理であることをご了承くださいませ ↩︎