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