vue 单元素过渡

demo
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <style style="text/css">
      .sni-enter-active,.sni-leave-enter {
        transition:all 1.5s linear;

      }
      .sni-enter,.sni-leave-active {
        opacity:0.5;
        transform:translateX(100px);
      }

    </style>
</head>
<body>
<div id="my">
  <button @click="show = !show">查看我的变化</button>
  <transition name="sni">
    <div v-if="show">
      请看我的变化
    </div>
  </transition>

</div>
<script>
   new Vue ({
     el:'#my',
     data:{
       show:true
     }
   })
</script>
</body>
</html>
效果：