【Vue.js】GSAPを使ってv-forの要素を一つずつアニメーションさせる方法

2021年5月25日Vue.js

Vue.jsでGSAPを使ってv-forの要素を一つずつアニメーションさせる方法を紹介します。

GSAPを使ってv-forの要素を一つずつアニメーションさせる方法

変化させたい例

<ul>
 <li v-for="icon in snsIcons" :key="icon.name">
  <span class="material-icons">{{ icon.name }}</span>
 </li>
</ul>

    const snsIcons = ref([
      { name: 'twitter'},
      { name: 'facebook'},
      { name: 'linkedIn'},
      { name: 'Instagram'},
    ])

上のようなv-forで、4つの要素それぞれを少しずつずらしてアニメーションを適用させたいとします。

この場合、下のようにgsapのtoメソッドでdelayを設定しても同時に遅れてしまうだけとなります。

    const beforeEnter = (el) => {
      el.style.opacity = 0
      el.style.transform = 'translateY(100px)'
    }

    const enter = (el,done) => {
      gsap.to(el, {
        opacity: 1,
        y: 0,
        duration:0.6,
        onComplete: done,
        delay: 0.3,
      })
    }

そこで、次のようにします。

手順1:transition-groupで囲む

<transition-group
  tag="ul"
  appear
  @before-enter="beforeEnter"
  @enter="enter"
  >
  <li v-for="icon in snsIcons" :key="icon.name">
    <span class="material-icons">{{ icon.name }}</span>
  </li>
</transition-group>

ここまでは通常通りです。

手順2:indexを設定してdata属性を使う

<transition-group
  tag="ul"
  appear
  @before-enter="beforeEnter"
  @enter="enter"
  >
  <li v-for="(icon, index) in snsIcons" :key="icon.name" :data-index="index">
    <span class="material-icons">{{ icon.name }}</span>
  </li>
</transition-group>

上のようにindexをとることで、それぞれにdelayの秒数をかけ合わせることができれば、各々で遅延させることができます。
そのために、data属性を使って、indexを指定します。
data属性は動的になるのでv-bind(:)を忘れずにセットします。

手順3:delayとindexをかけ合わせる

    const beforeEnter = (el) => {
      el.style.opacity = 0
      el.style.transform = 'translateY(100px)'
    }

    const enter = (el,done) => {
      gsap.to(el, {
        opacity: 1,
        y: 0,
        duration:0.6,
        onComplete: done,
        delay: el.dataset.index * 0.3,
      })
    }

上のように、要素(el)にアクセスして、data属性にはdatasetでアクセスできるので、それのindexには、0，1，2，3が格納されているため、それを設定した秒数(上の場合は0.3秒)で遅延させることで、v-forの要素を一つずつアニメーションさせることができます。