<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{ 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>