smooth-scroll vue.js nuxt.js

smooth-scroll-vue

<template>
  <div>
    <p class="fadeInUp">
      smooth-fade-in-up
    </p>
  </div>
</template>
<script>
export default {
  mounted() {
    const options = {
      root: null,
      rootMargin: "10px",
      threshold: 0
    }
    const images = document.querySelectorAll('.fadeInUp')
    images.forEach((target) => this.onIntersect(target, options))
  },
  methods: {
    onIntersect(target, options = {}) {
      const observer = new IntersectionObserver(this.addShowClass, options)
      observer.observe(target)
    },
    addShowClass(entries) {
      for (const e of entries) {
        if (e.isIntersecting) {
          e.target.classList.add("is-fadeInUp")
        }
      }
    }
  },
}
</script>
<style lang="scss"　scoped>
div {
  .fadeInUp {
    opacity: 0;
    transform: translate(0, 60px)
  }
  .is-fadeInUp {
    opacity: 1;
    transition: opacity .8s linear 0s, transform .9s cubic-bezier(.165, .84, .44, 1) 0s;
    transform: translate(0, 0)
  }
}
</style>