vue元素过渡出现的坑

当使用相同的标签名元素进行过渡时，会发现过渡不起作用，例如如下代码

<div class="trans">
  <transition name="trans" mode="out-in">
    <p v-if="show">123</p>
    <p v-else>465</p>
  </transition>
  <button @click="toggle">toggle</button>
</div>

解决办法是在p标签上添加一个key来区分这两个元素是不一样的

<div class="trans">
  <transition name="trans" mode="out-in">
    <p v-if="show" key="1">123</p>
    <p v-else key="2">465</p>
  </transition>
  <button @click="toggle">toggle</button>
</div>