Nuxt.jsでスクロールアニメーションを入れる- ライブラリ Animated on Scroll (AOS)

明けましておめでとうございます。

フロントエンドエンジニアリングを勉強する前はjQuery多用ユーザーだったので、VueではjQuery使わないの？えっじゃあアニメーションとかコーディングしなきゃいけないの！？と慌てふためく脆弱エンジニアでした。VueやNuxtではライブラリが充実しているんですね〜ありがたやありがたや。

というわけで、今回はNuxt.jsにスクロールアニメーションを実装します。ライブラリで。（倒置法）

参考サイト
https://michalsnik.github.io/aos/
https://zacheryng.com/nuxt-with-animated-on-scroll/

npm install aos --save

グローバルに使いたいので@/plugins/aos.jsに導入。

import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css'

Vue.use(
  AOS.init({
    once: true,
    disable: window.innerWidth < 640,
    duration: 750,
    easing: 'ease-out-quart',
  })
)

nuxt.configに追記

plugins: [
    { src: "@/plugins/aos", mode: "client" },
  ],
purgeCSS: {
    whitelist: ["aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "zoom-in"],
}

描画。（vuetify使っているのでplacementValいらなかったです…）

            <v-item-group>
              <v-row>
                <v-col v-for="item in serviceItems" :key="item.name">
                  <v-item
                    :data-aos="`${item.motionVal}`"
                    :data-aos-anchor-placement="`${item.placementVal}`"
                  >
                    <v-card
                      height="200"
                      class="d-flex align-center top_services_item"
                      >{{ item.name }}</v-card
                    >
                  </v-item>
                </v-col>
              </v-row>
            </v-item-group>
<script>
export default {
  data() {
    return {
      serviceItems: [
        {
          name: 'item1',
          contents: 'ここに説明が入ります。',
          placementVal: 'top-center',
          motionVal: 'fade-up',
        },
        {
          name: 'item2',
          contents: 'ここに説明が入ります。',
          placementVal: 'center-center',
          motionVal: 'fade-down',
        },
        {
          name: 'item3',
          contents: 'ここに説明が入ります。',
          placementVal: 'bottom-center',
          motionVal: 'fade-up',
        },
    }
  },
}
</script>