<template>
  <div class="hello">
    <input type="button" value="button" @click="flag=!flag" />
    <transition name="custom">
      <h1 v-if="flag">这是一个自定义v-前缀的动画</h1>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return { flag: false };
    },
    mounted() {}
  };
</script>

<style scoped>
  .custom-enter,
  .custom-leave-to {
    opacity: 0;
    transform: translateX(50px);
  }
  .custom-enter-active,
  .custom-leave-active {
    transition: all 0.8s ease;
  }
</style>