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

前置き

シンプルですが、インパクトがありますね！
ページ遷移アニメーション
これができるとダイナミックなアニメーションで
インパクトを与えられます。
今回はその基礎編として、
Nuxt.jsで簡単に実装する方法をご紹介します🌟
実践編では更に実用的な例をご紹介します！

transitionと@keyframe animationの違い

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

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

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

transitionの使い方　超簡単ver.

クリックしてLogoコンポーネントを表示、
ほわっと出現させてみます⭐︎

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

【How to use】

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

) pages

余白などのスタイリングは省きます。

<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タグに、作成したnameを紐付け

</transition>

</div>

</template>

import Logo from '~/components/Logo.vue'

export default {

// transitionの名前を決める

transition: {

name: 'fade',

components: {

Logo

data() {

return {

show: false

}

</script>

　.fade-enter {

opacity: 0;

}

.fade-enter-active {

transition: opacity .7s;

}

</style>

transitionの使い方　ページ遷移ver

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

【How to use】

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

) pages

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

<script>
export default { }
</script>

<nuxt-link to="/star">

</nuxt-link>

</div>

</template>

export default { }

</script>

) pages

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

<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>

</div>

</template>

export default {

transition: {

name: 'bounce',

}

</script>

.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】transition基礎編：ページ遷移アニメーション

前置き

transitionと@keyframe animationの違い

transitionの使い方 超簡単ver.

【How to use】

transitionの使い方 ページ遷移ver

【How to use】

transitionの使い方　超簡単ver.

transitionの使い方　ページ遷移ver