vue学习笔记---购物车添加动画小球

<transition
	v-on:before-enter="beforeEnter"
   v-on:enter="enter"
   v-on:after-enter="afterEnter"
>
	<div v-if="ball.show"  class="ball  bg-fec rd50">+</div>
</transition>
/////////////////////////////////////////////
<script>
	export default {
		data() {
			return {
				ball: {
					show:false,
					el:null
				}
			}
		},
		methods: {
			addCart(e) {
				// 获取点击位置，显示小球
				this.ball.show = true;
				this.ball.el = e.target;
			},
			//开始过渡前
			beforeEnter(el){
				const dom = this.ball.el,
				react = dom.getBoundingClientRect(),
				// 让小球坐标移到点击位置
				x = react.left - window.innerWidth,
				y = react.top - window.innerHeight;
				// ball盒子横向移
				el.style.transform = `translate3d(${x}px,${y}px,0)`
			},
			//过渡中
			enter(el,done){
				// 触发重绘！！！！！
				document.body.offsetHeight
				// 回到原点
				el.style.transform = `translate3d(0,0,0)`
				el.addEventListener('transitionend',done)
			},
			//过渡结束
			afterEnter(){
				// 结束隐藏小球
				this.ball.show = false;
			}
			
		},
	}
</script>
<style>
	.ball{
		position: fixed;
		left: 70%;
		bottom: 10px;
		z-index: 1002;
		transition: all 1s cubic-bezier(0.49,-0.29,0.75,0.41); 
	}
</style>

总结：先css定好最终位置，js控制初始化位置，vue执行过度动画