動的ルート使って表示しているページ間でのトランジション

TOPページから他のページに遷移した際は通常通りに画面のtransitonが発生するのですが、
動的ルートマッチングで作成したページ間のときだけページ遷移時にtransitionが発生しません。

例えば
/から/aboutへの遷移、その逆の遷移もトランジションが発生します。
/からroute/index.jsで設定したリンク先である/category01/item01に遷移した時にもトランジションが発生しますが、/category01/item01から/category02/item02/のようなリンクへ飛んだときはトランジションが発生しません。

動的に生成したURLから、動的に生成したURLに遷移する際にもトランジションを発生させたいです。
同じコンポーネントのインスタンスを使いまわしているから、トランジションが発生しないのかなとは思っていますが、解決方法がわからず…。ご教示いただければ幸いです。よろしくお願いいたします。

App.vuerouter/index/jsDetail.vueは下記の通りです。

App.vue

<template>
  <div id="app">
    <main>
      <transition name="transition">
        <router-view>
      </transiton>
    <main>
  </div>
</template>

router/index.js

export default new Router({
  mode: 'history',
  routes: [
    {
        path: '/',
        name: 'Index',
        components: () => import('../views/Index.vue')
    },
   {
        path: '/about',
        name: 'About',
        components: () => import('../views/About.vue')
    },
   {
        path: '/:category_name/:item_name',
        name: 'Detail',
        components: () => import('../views/Detail.vue')
    },
  ]
})

Detail.vue

<template>
  <div>
   <p>関連する内容</p>
    <ul>
      <li v-for="item of items" :key="item.id">
          <router-link :to="name: 'Detail', params: { category_name: item.category_name. item_name: item.name }    ">
            <!-- 省略 -->
          </router-link>
      </li>
    </ul>
  </div>
</template>

router-viewに対してkeyを設定してあげるとtransitionが反映されるようです。