Vuetifyのv-paginationにtransitionを付けたい

Question

Nuxt.jsにて作成したブログにVuetifyのv-paginationを導入しました．
ページネーションを利用してブログ一覧のページを変更する際，transitionがなく切り替わってしまうのでtransitionを利用したページ遷移アニメーションのようなものを付けたいのですが，どこにつければ良いのか分かりません．

いくつかの部分にtransitionを付けてみたのですがいづれも反映されませんでした．
これは，パスの変更が発生しないのでtransitionが発生しないという認識であっているのでしょうか．
また，遷移アニメーションを付ける方法があればお伺いしたいです．

追記
記事データはCMSであるcontentfulから取得しています．

//index.vue

<template>
  <div>
    <section class="p-posts">
      <Card
        v-for="post in pagePosts"
        :key="post.fields.slug"
        :title="post.fields.title"
        :slug="post.fields.slug"
        :header-image="post.fields.headerImage"
        :published-at="post.fields.publishedAt"
        :tag="post.fields.tag.fields.tag"
        :tag-slug="post.fields.tag.fields.tagSlug"
      />
    </section>
    <article class="pagination">
      <v-pagination
        v-model="page"
        :length="length"
        :circle="true"
        color="#00aca3"
        @input = "pageChange"
      />
    </article>
  </div>
</template>

<script>
import { createClient } from "~/plugins/contentful.js";

const client = createClient();
export default {
  transition: "fade",
  data () {
    return {
      page: 1,
      pagePosts: [],
      pageSize: 6,
      length:0,
    }
  },
  async asyncData({ env, params }) {
    return await client
      .getEntries({
        content_type: env.CTF_BLOG_POST_TYPE_ID,
        order: "-fields.publishedAt",
      })
      .then(entries => {
        return {
          posts: entries.items
        };
      })
      .catch(console.error);
  },
  mounted: function(){
    this.posts
    this.pagePosts = this.posts.slice(0,this.pageSize)
    this.length = Math.ceil(this.posts.length/this.pageSize);
  },
  methods: {
    pageChange: function(pageNumber){
      this.pagePosts = this.posts.slice(this.pageSize*(pageNumber -1), this.pageSize*(pageNumber))
    },
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: all .5s ease-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter {
  transform: translateY(15px);
}

.pagination {
  margin-top: 64px;
}
</style>

Answer 1

Vue.jsのtransitionを利用すると良いと思いました。

まず、記事表示部分 Cardタグを transitionタグで囲い、Cardタグにv-show="show"を追加してみました。

<section class="p-posts">
  <transition name="fade">
    <Card
      v-show="show"
      v-for="post in pagePosts"
      :key="post.fields.slug"
      :title="post.fields.title"
      :slug="post.fields.slug"
      :header-image="post.fields.headerImage"
      :published-at="post.fields.publishedAt"
      :tag="post.fields.tag.fields.tag"
      :tag-slug="post.fields.tag.fields.tagSlug"
    />
  </transition>
</section>

次に dataにshowを追加します。初期値:true

data () {
  return {
    page: 1,
    pagePosts: [],
    pageSize: 6,
    length:0,
    show: true
  }
}

最後に pageChange関数を以下のようにしました。

pageChange: function(pageNumber){
  this.show = false;
  this.pagePosts = this.posts.slice(this.pageSize*(pageNumber -1), this.pageSize*(pageNumber))
  window.setTimeout(() => {
    this.show = true;
  }, 500);
  
    }

ご定義いただいているstyleをそのまま利用します。
Cardコンポーネントをdivタグで代用し上記で動作いたしました。

もっと良い方法があるかもしれませんが、ご参考になれば幸いです。

Comments

[asasaas]

ご回答ありがとうございます．
こちら記述不足で誤解させてしまい申し訳ありませんが，記事データはCMSより取得し，メソッドで表示する記事一覧の変更を行っています．
コードの追記をしましたので確認いていただけると助かります．

[Twoshi]

ご質問の追記ありがとうございます！
上記承知いたしました！
回答修正いたします。
よろしくお願いいたします。

[asasaas]

ご回答ありがとうございます．
こちら試したところ，Cardを１ページで全て表示したときの位置にtransitionで現れてから移動するという現象が発生してしまいます．
１ページあたりのCard表示数を２とした場合，電卓でいう7,8の部分に表示されていた2枚のCardがフェードアウトすると同時に9,4の位置に新しいCardがフェードインし，それが終わってから7,8の位置に移動するといった感じです．
Twoshiさんの実装ではこのような現象は発生しませんでしたでしょうか？

[asasaas]

すいませんこちらはv-showの記述漏れによるもので解決しました．
しかし，現状transitionのフェードアウトが効かない状態です．

[asasaas]

>>しかし，現状transitionのフェードアウトが効かない状態です．
こちらの問題はpageChange内のpagePostsを変更する式をsetTimeout内に移動することで解決致しました！
showをtrueからfalseに変更し終わってから表示Cardの変更を行うと同時にshowをtrueにするといったことですね，とても参考になりました．
以上，特に問題がなければベストアンサーを選び質問を閉じさせていただきます．

[Twoshi]

ご確認いただきありがとうございます！
解決されてよかったです！

> こちらの問題はpageChange内のpagePostsを変更する式をsetTimeout内に移動することで解決致しました！
こちらの変更タイミングまで行き届いておらず、お手数をおかけしましたm(_ _)m