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。

vue-cli 中实现简单动画效果 （vue2.0）

原文：http://www.cnblogs.com/pearl07/p/6272421.html