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:50%;
   background:rgba(6,21,51,0.4);
   color:#fff;
  }
  .car{
   transform:translateX(0) rotate(0deg);   
 
  }
  .move-enter-active, .move-leave-active{
    transition:all 1.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:0
      },

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

  </script>

 

posted @ 2017-05-12 16:39  GoTime  阅读(1196)  评论(0)    收藏  举报