官方比较正式的解释请点击下方链接：
https://cn.vuejs.org/v2/guide/transitions.html

transition里的元素触发了v-if或者 v-show之类的操作时候，Vue 将会做处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名（本例用的是css方式，话说，能用css解决的为什么要麻烦js~~）。

过渡的类名有六种，代码中css里有备注说明各个类名的用途。

如果你使用一个没有名字的 <transition>这些类名的默认前缀。如果你使用了 <transition name="fade">,那么 v-enter 会替换为 fade-enter。

接下来上代码：

<template>
  <div>
    <div>
      <mt-button @click="showBtn1 = !showBtn1">过渡</mt-button>
      <transition name="fade">
        <div style="margin-top: 20px;" v-show="showBtn1">我赌你的枪里没有子弹</div>
      </transition>
    </div>

    <div style="margin-top: 20px;">
      <mt-button @click="showBtn2 = !showBtn2">动画</mt-button>
      <transition name="bounce">
        <div style="margin-top: 20px;" v-if="showBtn2">我赌你的枪里没有子弹</div>
      </transition>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      showBtn1: false,
      showBtn2: false,
    }
  },
  computed: {
  },
  methods:{
      
  }
}
</script>

<style lang="css" scoped>
   /* 元素开始进入前和离开后的状态（还没做过渡的样子，比如隐藏掉目标元素） */
  .fade-leave-to, .fade-enter{     
    opacity: 0;
    transform: translateY(30px) scale(0);
  }

  /* 元素进入后和离开前的状态，（做完过渡应该展示的样式，可不设置此项 ）*/
  .fade-enter-to, .fade-leave{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
/* 元素正处于进入和离开的过程中（过渡进行中）*/
  .fade-enter-active, .fade-leave-active{
    transition: all .3s;
  }

/* 动画类只需要写这两条css即可*/
  .bounce-enter-active {
    animation: bounce-in .6s;
  }
  .bounce-leave-active {
    animation: bounce-in .6s reverse;
  }
/* 定义元素要执行的动画*/
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
</style>

老是记不住，哎。