vue2 过渡动画

 <body>
<div id="app">
    <transition name="move">    // transition里面的 div是我们要执行的动画
    <div class="car" @click="car" transition="move" v-show="number>0">-</div>
    </transition>
    <div class="num">{{number}}</div>
    <div class="add" @click="add">+</div>

 </div>

  <style>

div div{
  width:20px;
  height:20px;
  display:inline-block;
  text-align:center;
   vertical-align:top;
   position:relative;
   border-radius:%;
   background:rgba(,,,0.4);
   color:#fff;
  }
  .car{
   transform:translateX() rotate(0deg);   

  }
  .move-enter-active, .move-leave-active{
    transition:all .5s;    //动画持续的时间
  }
  .move-leave-active, .move-enter{
    transform:translateX(180px) rotate(180deg);
// 我理解为 我们开始的时候是 rotate180deg  => .car的 rotate(0deg)  过渡    180deg => 0deg

//  当我们的number不满足0的时候，我们 当前是 0 然后往 180过渡，然后隐藏  0deg =>180deg

  }
   </style>
  <script>

    new Vue({
      el:"#app",
      data:{
        number:
      },

      computed:{

      },
      methods:{
       car:function(){
         if(this.number > ){
          this.number--;
         }
       },
       add:function(){
         this.number++;
        }
      }

    })

  </script>