vue中使用transition标签实现过渡```js ```把模板里面要显示或者也隐藏的内容用<transition>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!--  添加过渡样式 -->
    <style>
      /* 过渡 */
      .transition {
        transition: all 1s linear;
      }
      /* 入场动画开始状态 */
      .v-enter-from {
        opacity: 0;
      }
      /* 入场动画结束状态 */
      .v-enter-from {
        opacity: 1;
      }
      /* 入场动画过渡状态 */
      .v-enter-active {
        transition: opacity 1s linear;
      }
      /* 出场动画开始状态 */
      .v-leave-from {
        opacity: 1;
      }
      /* 出场动画结束状态，完全显示 */
      .v-leave-to {
        opacity: 0;
      }
      /* 出场动画过渡状态 */
      .v-leave-active {
        transition: opacity 1s linear;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      // 变量
      data() {
        return {
          isShow: true,
          transition: true,
        };
      },
      //   逻辑
      methods: {
        handleClick() {
          this.isShow = !this.isShow;
          }
        },
      },
      // 模板,把模板里面要显示或者也隐藏的内容用<transition></transition>包起来
      template: `
       <transition>
        <h1 v-if="isShow" >hello world</h1>
        </transition>
        <button v-on:click="handleClick">点击</button>
        `,
    });
    const vm = app.mount("#root");
  </script>
</html>