Nuxt.jsでスクロールに応じてフェード出現

プラグインファイルを作成・設定したら、スクロールに応じてイベントが走る

作成

$ touch plugins/v-scroll.js

plugins/v-scroll.js

import Vue from 'vue'

Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
  }
})

設定

nuxt.config.js

module.exports = {
  plugins: ['~/plugins/v-scroll'] // 追記
}

使用

test.vue

<template lang="pug">
.test(:class="[{'is-active': flg}]" v-scroll="handleScroll") test
</template>

<script>
export default {
  data: () => ({
    flg: false
  }),
  methods: {
    handleScroll(evt, el) {
      const top = el.getBoundingClientRect().top
      const wh = window.innerHeight
      if (top < wh / 2) this.flg = true
    }
  }
}
</script>

<style lang="stylus">
.test
  opacity 0
  transition all 1s

  &.is-active
    opacity 1
</style>

Nuxt.jsのそのほか

• Nuxt.jsを使う