vue-cli 中實現簡單動畫效果 （vue2.0）

1，寫一個簡單的headcomp組件如下：

<template>
　　<div class="box">
　　　　<transition name="move">
　　　　　　<button @click = "decrease" v-show="home.count>0" class="decrease">我是減法</button>
　　　　</transition>
　　　　<div class="num" > {{home.count}} </div>
　　　　<button @click = "add" >我是加法</button><br><br>
　　</div>
</template>

<script>
　　export default{
　　// 使用props接收傳過來的數據
　　props:{
　　　　home:{
　　　　　　type:Object,
　　　　}
　　},

　　methods:{
　　　　decrease:function(){
　　　　　　if(!this.home.count){
　　　　　　　　this.home.count = 1;
　　　　　　}else{
　　　　　　　　this.home.count--;
　　　　　　}

　　},

　　　　add:function(){
　　　　　　if(!this.home.count){
　　　　　　　　this.home.count = 1;
　　　　　　}else{
　　　　　　　　this.home.count++;
　　　　　　}
　　　　}
　　}

}
</script>

<style>
　　div>button,.num{
　　display: inline-block;
}
div>button{
　　border:none;
　　background:#41b883;
　　color:#fff;
　　padding:5px 20px;
　　margin:0 20px;
}
.box{
　　width:400px;
　　position: relative;
}
.decrease{
　　position: absolute;
　　left:30px;
　　transition:all 0.3s linear;
}
.add{
　　position: absolute;
　　right:0;
}

//以下的類，是執行動畫時產生的，可以根據動畫執行開始/結束，設置不同狀態時候的樣式
.move-transition{
　　opacity: 1;
　　transform: translate3d(0,0,0);
}

.move-enter-active,.move-leave-active{
　　opacity: 0;
　　transform: translate3d(5px,0,0);
}

</style>

 

2，圖示

• 

 

3，效果：當count>0 : 向左移動，透明度從0-1；當count<0 ： 向右移動，透明度從1-0。