はじめに

Vue.jsは、動的なウェブアプリケーションを簡単に作ることができるフレームワークです。特にアニメーションやトランジションを使うことで、ユーザーにとってもっと魅力的な体験を提供できます。本記事では、Vue.jsでのアニメーションとトランジションの基本を説明します。

Vue.jsのトランジションとは

トランジションは、ある状態から別の状態に変わるときの「動き」を表現します。たとえば、要素が表示されたり隠れたりする際のアニメーションです。Vue.jsでは、トランジションの設定がとても簡単です。

トランジションの使い方

Vue.jsでは、transitionというコンポーネントを使います。次のコードを見てみましょう。

<template>
  <div>
    <button @click="show = !show">切り替え</button>
    <transition name="fade">
      <div v-if="show">こんにちは！</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

アニメーション効果の追加

上記のコードでは、要素が表示されるときに「fade」というクラスが適用されます。このクラスには、アニメーションのスタイルを記述します。以下のようにCSSを書いてみましょう。

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

これにより、要素が徐々に表示され、また徐々に隠れるアニメーションが実現します。

Vue.jsでのリストのアニメーション

リストの要素が追加されたり削除されたりするときにもアニメーションを加えることができます。次の例を見てみましょう。

<template>
  <div>
    <button @click="addItem">アイテム追加</button>
    <transition-group name="list">
      <div v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem() {
      this.items.push('新しいアイテム');
    }
  }
}
</script>

リストのアニメーションスタイルを設定する

リストのトランジションを強調するためには、以下のようなCSSスタイルを追加します。

.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

これで、リストのアイテムが追加または削除されるときに、スムーズなアニメーション効果が得られます。

まとめ

Vue.jsのトランジションとアニメーションを使うことで、ウェブアプリケーションに動きを加えることができます。