Vueで配列に追加する時に、表示をアニメーションする方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
Vue で配列に追加する時に、表示をアニメーションする方法についてまとめました。
Vue で配列に追加する際に、アニメーションする方法
Vue において、アニメーションする方法
Vue では、v-if や v-show などの表示・非表示の切り替えの時などでアニメーションする方法として便利なコンポーネントが用意されています。
それが
<Transition></Transition>
コンポーネントです。
Vue の Transition を使う方法を簡潔に書いてみる
大抵の場合、これで行けますが、今回の記事でメインとなるのは配列の時のパターンです。
さっそく実装
ボタンを押せば配列に要素が追加され、追加された要素がふわっと浮いてくるようなアニメーションになります。
<template>
<div class="container">
<button @click="addArray">増えるよ</button>
<!-- v-forで配列が増える部分をtransition-groupタグで囲う -->
<!-- listという名前のアニメーションを指定しています -->
<transition-group name="list" tag="div">
<div v-for="a in array" :key="a.id">
<p>{{ a.id }}: {{ a.text }}</p>
</div>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
//初期値を入れているだけ
array: [
{
id: 1,
text: "テキスト１",
},
{
id: 2,
text: "テキスト2",
},
{
id: 3,
text: "テキスト3",
},
],
}
},
methods: {
addArray() {
//今回はサンプルなので適当にオブジェクトを入れる関数を書いています
this.array.push({
id: 4,
text: "テキスト４",
})
},
},
}
</script>
<style scoped>
.container {
margin: 100px;
width: 100%;
}
/* listという名前のアニメーションを用意しています。公式のやつのコピペです */
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
</style>実装の解説
コンポーネントを使う
<transition-group name="list" tag="div">
<div v-for="a in array" :key="a.id">
<p>{{ a.id }}: {{ a.text }}</p>
</div>
</transition-group>配列の場合、v-for で表示をコーディングすることが多いと思いますが、このように<Transition>コンポーネントではなく、<TransitionGroup>コンポーネントを使うことでアニメーションを実装することができます。
transition-group には name を指定します
今回でいえば、name="list"なので list という名前がついています。
transition-group には tag を指定します
今回でいえば、tag="div"なので div タグが追加されています。
style にアニメーションする内容を書く
/* listという名前のアニメーションを用意しています。公式のやつのコピペです */
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}今回は、下からふわっと浮かび上 がってくるように追加される書き方です。
以上がアニメーションする方法で、CSS を変更することで様々なアニメーションを実装することが可能です。
アニメーションとは
Web におけるアニメーションは、Web ページやアプリケーションの要素に動きを加えることで、ユーザー体験を向上させたり、情報の伝達をスムーズにしたりするのに有効な手段です。
逆に、適切に設計しないと、ユーザーにとって使いにくいものになることもあります。
メリット
視覚的なガイド
アニメーションを使うと、ユーザーがどこに注目すべきかを自然に誘導できます。
たとえば、ボタンのホバーエフェクトや通知のフェードインは、ユーザーにとっての操作や情報を目立たせます。
ユーザー体験の向上
アニメーションがあるとインタラクションが楽しくなり、アプリや Web サイトがより直感的に感じられるため、ユーザーエンゲージメントが高まります。スムーズなアニメーションは信頼性や高品質感も与えます。
情報のスムーズな伝達
アニメーションで要素が現れたり消えたりすることで、情報が段階的に表示され、ユーザーが情報を受け取りやすくなります。例えば、ロード中のスピナーアニメーションは処理待機を示し、ユーザーに安心感を与えます。
ブランディングの強化
ブランドイメージに合わせたアニメーションは、Web サイトの個性を際立たせ、ユーザーに強い印象を残します。
デメリット
パフォーマンスの低下
アニメーションが多いとページの読み込み時間が長くなり、特にモバイルデバイスでは動作が重くなることがあります。適切でないアニメーションはフレームレートの低下を引き起こし、ユーザーに遅延感を与えることもあります。
ユーザビリティへの影響
過度なアニメーションや不適切なエフェクトは、ユーザーにとって煩わしく、インターフェースの理解を妨げる原因になります。特にフラッシュやちらつきのあるアニメーションは、ユーザーの注意を散らし、混乱を招くことがあります。
アクセシビリティの問題
視覚や認知に障害があるユーザーには、動きの多いコンテンツが負担になる場合があります。特定のアニメーションは、乗り物酔いや気分不良の原因になることもあり、特に「Reduce Motion（動作の軽減）」設定に対応しないとユーザーの離脱を招きかねません。
開発・メンテナンスのコスト
アニメーションの実装には、追加のコードやデザインが必要で、手間がかかります。また、ブラウザ互換性の確保や、他の要素との調整が難しく、将来的なメンテナンスも複雑になりがちです。
まとめ
Vue で配列に追加する時に、表示をアニメーションする方法についてまとめてみました。
Vue には便利なコンポーネントが沢山あって、その中の<TransitionGroup>を使うと今回の内容は簡単に実装することができます。
誰かの参考になれば幸いです。
