【Vue.js】GSAPを使ってrouterにアニメーションを加える方法

2021年5月26日Vue.js

Vue.jsでGSAPを使ってrouterにアニメーションを加える方法をまとめました。

GSAPを使ってrouterにアニメーションを加える方法

App.vueでは、次のようなよくあるrouter-linkが設定されているものとします。

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> | 
    <router-link to="/contact">Contact</router-link> |
  </div>
  <router-view/>
</template>

リンクを遷移したときに、アニメーションを適用させたい場合、次のようにします。

transitionとcomponentをセットする

<router-view/>を下のように閉じタグを作成する

  <router-view>
    <transition>
      <component is=""></component>
    </transition>
  </router-view>

まず、router-viewの閉じタグを作成します。
その中にtransitionコンポーネントをいれます。
その中にcomponentタグをいれ、is属性をセットします。
componentタグではどのコンポーネントをレンダーしたいのかをis属性を通して伝えます。

v-slotとis属性でcomponentを受け渡しする

  <router-view v-slot="{ Component }">
    <transition>
      <component :is="Component"></component>
    </transition>
  </router-view>

router-viewにv-slotでcomponentを検知することで、どのcomponentのことかがわかるようになります。

そして、componentタグのis属性でそのComponentには、transitionが適用される必要があるということがわかります。

transitionのnameとmodeを設定する

  <router-view v-slot="{ Component }">
    <transition name="route" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>

あとは通常の流れと同じになります。
上では、name属性とmode属性を付与しています。

cssでtransitionを設定する

.route-enter-from {
  opacity: 0;
  transform: translateY(200px);
}
.route-enter-active,
.route-leave-active {
  transition: all 0.5s ease-out;
}
.route-leave-to {
  opacity: 0;
  transform: translateY(-200px);
}

こちらも特に変わって点はありません。
transitionを場面でopacityやtransformを設定して変化させます。