初心者向け。Vue.jsで画面をスクロールするとフェードインする方法
2244 回閲覧されました
Vue.jsで画面をスクロールすると下から内容がフェードインの実装の解説をします。
理解してもすぐに忘れる自分への解説です。
デモは↓です。
See the Pen
by jonio-uhei (@jonio-uhei)
on CodePen.
完成形のコードは↓です。（CODEPENのコードはこれで表示させるために少し書き方を変えているので完成形のコードを参考にした方がいいです）
それでは解説しますがCSSに関しては解説しませんのでご了承ください。
66行目〜69行目は最初に画面が表示された時に画面スクロールでフェードインができるようにできるための記述です。
67行目が1つ目の内容がフェードインするための記述で68行目が2つの内容がフェードインするための記述です。
66行目の「created()」についてですが用途で細かく分けるのですがフェードインの場合はどちらでも大丈夫です。
表示させる内容はv-show（17行目と43行目）で囲んでおいて状態がtrueになることで表示させます（62行目と63行目で最初はfalseにしています）
そして75行目〜80行目（1つ目の表示させる内容）と82行目〜88行目（2つ目の表示させる内容）で画面スクロールを一定量する（window.scrollY > 300のこと）ことで状態をtrueにしてスクロールを一定量戻す（window.scrollY < 290のこと）と表示された内容がまた隠れるようにします。
70行目〜73行目ですがスクロールで表示されるのが終わった段階でwindow.addEventListener（67行目と68行目）が終了しないとイベントが増えれば増えるほど画面の読み込みをしないといけなくなり画面表示が遅くなるのですがそれを防ぐための内容です。
このやり方で左からフェードイン、右からフェードイン、上からフェードインなどできます。