动画--使用钩子函数模拟加入购物车效果

.css

用一个小球模拟商品

	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: red;
	}

html

<div id="app">
   <input type="button" value="添加购物车" @click="flag=!flag" />
<!--使用transition 元素 把小球包裹起来-->
<transition @before-enter="beforEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>

vue

 var vm = new Vue({
  el: '#app',
  data: {
  flag:false
  },
  methods:{//定义方法
  	//el表示要执行动画的元素，是原生的jsdom对象
       //documment.get
    beforEnter(el){
    	//表示动画入场之前，动画还未开始。可以再beforEnter中设置初始样式
    	//设置小球开始动画之前
    	el.style.transform="translate(0,0)"
    },
    enter(el,done){
    	el.offsetWidth;//强制动画刷新
    	//设置小球开始之后的样式，可以设置完成后的结束状态
    	el.style.transform="translate(150px,450px)";
    	el.style.transition='all 1s ease'
    	//done()是afterenter的引用
    	done()
    },
    afterEnter(el){
    	//动画完成之后
    	this.flag =! this.flag;
    }
  	}
});

上面代码只是简单的实现一下功能，简单的逻辑。具体样式根据情况使用