【Nuxt.js】transition基礎編：ページ遷移アニメーション

# 前置き
![picture_pc_f1586b9d73723098887d0af9bf5eb337.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/a35a49ee-48ec-f099-4382-b65d55555e6c.gif)
シンプルですが、インパクトがありますね！
ページ遷移アニメーション
これができるとダイナミックなアニメーションで
インパクトを与えられます。
今回はその基礎編として、
Nuxt.jsで簡単に実装する方法をご紹介します🌟
実践編では更に実用的な例をご紹介します！

# transitionと@keyframe animationの違い
アニメーションをやると
必ず出てくるこの2つ。
簡単に違いを言うと
**transitionはきっかけが必要です。**
つまりページ遷移は、
遷移をきっかけにアニメーションを起こすため、
transitionが必須です。

@keyframe animationは
きっかけがなくても使用できます。
ちなみに併用は可能です。

まずはtransitionの簡単な使い方から解説、
その後ページ遷移の実装を行います！

# transitionの使い方　超簡単ver.
【表示結果】
クリックしてLogoコンポーネントを表示、
ほわっと出現させてみます⭐︎
![picture_pc_bc4820f5532601d7b94d8b7abf32d736.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/b5ac1fd8-a00d-adb0-5c21-3538df3e210b.gif)

アイコンはiconmonstrさんでお借りしました。
starで検索、
svgコードを貼り付けて使用しております。
https://iconmonstr.com/

【How to use】
使い方はtransitionに名前をつけて…
その名前をクラス名として使用するだけ！
ボタンをクリックしてから
どこまでにどの動きをするのかを
# トランジションクラスで設定します。
https://jp.vuejs.org/v2/guide/transitions.html#トランジションクラス

【コード】
余白などのスタイリングは省きます。

```index.vue
index.vue
<template>
 <div class="container">
   <button @click="show = !show">お星さま</button>
   // transitionタグに、作成したnameを紐付け
   <transition name="fade">
     <Logo class="logo" v-if="show" />
   </transition>
 </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
 // transitionの名前を決める
 transition: {
   name: 'fade',
 },
 components: {
   Logo
 },
 data() {
   return {
     show: false
   }
 },
}
</script>

<style lang="scss" scoped>
　.fade-enter {
   opacity: 0;
 }
 .fade-enter-active {
   transition: opacity .7s;
 }
</style>
```

# transitionの使い方　ページ遷移ver
超簡単verを踏まえ
今度は遷移時にアニメーション
お星さまを/star.vueに移しています🎈

【表示結果】

![picture_pc_f1586b9d73723098887d0af9bf5eb337.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/c9ae2900-0f2a-5cf8-35f1-49b73b76fd20.gif)

【How to use】
今度はページ遷移をきっかけにアニメーションが起きます。
そのためindex.vueではtransitionの設定はしません。
遷移先で設定します。
今度はtransitionの名前を決めるだけでOK！
あとはトランジションクラスで動きをつけるだけ。
とっても簡単ですよね🤗

【コード】

```index.vue
index.vue
<template>
 <div class="container">
   <nuxt-link to="/star">
     <button>お星さま</button>
   </nuxt-link>
 </div>
</template>

<script>
export default { }
</script>
```

遷移先で設定
animationプロパティと
keyframesを併用しました。

```star.vue
star.vue // お星さま部分
<template>
 <div class="container">
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 6.76l1.379 4.246h4.465l-3.612 2.625 1.379 4.246-3.611-2.625-3.612 2.625 1.379-4.246-3.612-2.625h4.465l1.38-4.246zm0-6.472l-2.833 8.718h-9.167l7.416 5.389-2.833 8.718 7.417-5.388 7.416 5.388-2.833-8.718 7.417-5.389h-9.167l-2.833-8.718z"/></svg>
 </div>
</template>

<script>
export default {
 transition: {
   name: 'bounce',
 },
}
</script>

<style lang="scss" scoped>
  .bounce-enter-active {
   animation: bounce-in .8s;
 }
 .bounce-leave-active {
   animation: bounce-out .5s;
 }
 @keyframes bounce-in {
   0% { transform: scale(0) }
   50% { transform: scale(1.5) }
   100% { transform: scale(1) }
 }
 @keyframes bounce-out {
   0% { transform: scale(1) }
   50% { transform: scale(1.5) }
   100% { transform: scale(0) }
 }
</style>
```

これで基礎はバッチリですね🎉





**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab