vue transition显示隐藏过渡效果

Vue的transition组件可以实现元素的显示和隐藏过渡效果。你可以通过为transition组件添加name属性来设置过渡名称，然后根据该名称创建六个类来控制过渡效果。例如，name="demo"表示显示的过程（由隐藏的状态变成显示的状态），.demo-enter、.demo-enter-to、.demo-enter-active表示隐藏的过程（由显示状态变成隐藏的状态），.demo-leave、.demo-leave-to、.demo-leave-active。transition组件只是添加了这六个类，具体的过渡效果需要通过CSS过渡或动画来实现。如果你想实现入场过渡效果，可以为transition组件添加appear属性，这样当元素加载时会执行动画。下面是一个使用transition组件实现显示隐藏过渡效果的示例代码：

<div id="app">
  <button @click="toggle">切换</button>
  <!-- 通过name定义名称 -->
  <!-- 我们通过为transition组件添加appear属性，实现入场过渡：当元素加载的时候，执行动画 -->
  <transition name="demo" appear>
    <div class="box" v-show="isShow"></div>
  </transition>
</div>

你可以根据自己的需求修改name属性和CSS样式来实现不同的过渡效果。
#### 引用[.reference_title]
- *1* [vue3 transition 隐藏过渡，折叠过渡效果实现](https://blog.csdn.net/qq_31254489/article/details/121023860)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue transition 过渡动画](https://blog.csdn.net/ruantianqing/article/details/112602028)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]