前置き
シンプルですが、インパクトがありますね！
ページ遷移アニメーション
これができるとダイナミックなアニメーションで
インパクトを与えられます。
今回はその基礎編として、
Nuxt.jsで簡単に実装する方法をご紹介します🌟
実践編では更に実用的な例をご紹介します！
transitionと@keyframe animationの違い
アニメーションをやると
必ず出てくるこの2つ。
簡単に違いを言うと
transitionはきっかけが必要です。
つまりページ遷移は、
遷移をきっかけにアニメーションを起こすため、
transitionが必須です。
@keyframe animationは
きっかけがなくても使用できます。
ちなみに併用は可能です。
まずはtransitionの簡単な使い方から解説、
その後ページ遷移の実装を行います！
transitionの使い方 超簡単ver.
【表示結果】
クリックしてLogoコンポーネントを表示、
ほわっと出現させてみます⭐︎
アイコンはiconmonstrさんでお借りしました。
starで検索、
svgコードを貼り付けて使用しております。
https://iconmonstr.com/
【How to use】
使い方はtransitionに名前をつけて…
その名前をクラス名として使用するだけ！
ボタンをクリックしてから
どこまでにどの動きをするのかを
トランジションクラスで設定します。
【コード】
余白などのスタイリングは省きます。
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に移しています🎈
【表示結果】
【How to use】
今度はページ遷移をきっかけにアニメーションが起きます。
そのためindex.vueではtransitionの設定はしません。
遷移先で設定します。
今度はtransitionの名前を決めるだけでOK！
あとはトランジションクラスで動きをつけるだけ。
とっても簡単ですよね🤗
【コード】
index.vue
<template>
<div class="container">
<nuxt-link to="/star">
<button>お星さま</button>
</nuxt-link>
</div>
</template>
<script>
export default { }
</script>
遷移先で設定
animationプロパティと
keyframesを併用しました。
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