vue中使用transition标签实现动画效果```js ```把模板里面要显示或者也隐藏的内容用<transitio

<!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>
      /* 动画效果，需要有定位 */
      h1 {
        position: absolute;
      }
      /* 给动画效果设置关键帧 */
      /* 飞入的时候，translateX变化 */
      @keyframes flyin {
        0% {
          transform: translateX(-200);
        }
        10% {
          transform: translateX(0px);
        }
      }
      /* 飞出 */
      @keyframes flyout {
        0% {
          transform: translateX(0px);
        }
        10% {
          transform: translateX(-200px);
        }
      }
      /* 过渡 */
      .transition {
        transition: all 1s;
      }
      /* 用transition标签包裹以后，就可以设置v-enter-from */
      /* 入场动画效果状态 */
      .v-enter-active {
        animation: flyin 1s;
      }

      /* 出场动画效果状态， */
      .v-leave-active {
        animation: flyout 1s linear;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      // 变量
      data() {
        return {
          isShow: true,
          transition: true,
        };
      },
      //   逻辑
      methods: {
        // 点击的时候，isShow取反
        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>