震惊！！！一眼就能看懂的vue自带的transition组件！！！！

代码可以直接复制到项目中使用，真实有效，有用记得点赞互粉哦

<template>
  <div class="home">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <!-- 单元素/组件过渡 -->
    <button v-on:click="show = !show">
      showHello
    </button>
    <transition name="fade">
      <span v-if="show">hello</span>
    </transition>
    <br />
    <br />

    <button v-on:click="show1 = !show1">
      showWorld
    </button>
    <transition name="slide-fade">
      <span v-if="show1">world</span>
    </transition>
    <br />
    <br />

    <!-- CSS过渡 -->
    <button @click="show2 = !show2">showAnimation</button>
    <transition name="bounce">
      <p v-if="show2">CSS过渡动画</p>
    </transition>

    <!-- 自定义过渡的类名 -->
    <button @click="show3 = !show3">
      自定义过渡
    </button>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
      :duration="{enter:500, leave:800}"
    >
      <p v-if="show3">自定义类名动画</p>
    </transition>

    <!-- 显示的过渡持续时间： 使用<transition> 组件上的 duration prop 定制一个显性的过渡持续时间 -->
    <!-- 自动嗅探目标元素是否应用了CSS过渡或动画，如果是则在恰当的时机删除CSS类名
    如果过渡组件提供js钩子函数，就在钩子函数中运行,如果没钩子函数也没检测到CSS过渡动画，DOM操作(插入/删除)在下一帧中立即执行 -->
    <!-- 同时使用过渡和动画，可以是transitioned或animationend，如果使用任意一种，Vue都能自动识别监听 -->

  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      show: true,
      show1: true,
      show2: true,
      show3: true
    }
  },
  methods: {
    // Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
    // 条件渲染(使用v-if)，条件展示(使用v-show)，动态组件，组件根节点
    // 过渡的类名：在进入/离开的过渡中，会有 6 个 class 切换
// v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

// v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

// v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

// v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

// v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

// v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除

    // 自定义过渡类名，他们的优先级高于普通的类名
    // 我们可以通过以下 attribute 来自定义过渡类名：
    // enter-class
    // enter-active-class
    // enter-to-class (2.1.8+) 在2.1.8版本中
    // leave-class
    // leave-active-class
    // leave-to-class (2.1.8+) 在2.1.8版本中
    

  }
}
</script>
<style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 1s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in 2s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    25% {
      transform: scale(5);
    }
    50% {
      transform: scale(0.5);
    }
    75% {
      transform: scale(3);
    }
    100% {
      transform: scale(1);
    }
  }
</style>