vue的父组件使用子组件时，子组件transition失效问题

最近学习vue3时使用vue2的组件时碰到transition失效问题，在此记录：

错误写法，期间添加过appear属性，结果进场有动画，而离开没有

<!--子组件-->
<transition name="xxx-fade">
  <div> 
      我是子组件
  </div>
</transition>

<!--父组件-->
<template>
  <子组件 v-if="visible">// v-if写在此transition会失效或者半失效
   </子组件>
</template>

正确写法

<!--子组件-->
<transition name="xxx-fade">
  <div v-if="visible"> // 1、含v-if或v-show的标签应作为transition的子标签
      我是子组件
  </div>
</transition>


<!--父组件-->
<template>
  <子组件 :visible="visible">// 2、父组件通过传参给子组件控制
   </子组件>
</template>