vue实现添加到购物车小球动画---贝塞尔曲线

<template>
	<view>
		<view v-for="(item,index) in shopList" :key="index">
			<view @click="addCart($event,item)">{{item}}</view>
		</view>
		<view class="ball-wrap">
			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">

			</transition>
			<view class="ball" v-show="ball.show">
				<view class="inner">
					<image src="../../static/image/selectArrow.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ball: {
					show: false,
					el:null
				},
				shopList:['商品1','商品2','商品3','商品4','商品5','商品6']
			};
		},
		methods:{
			addCart(e,item){
				this.ball.el = e.target
				this.ball.show = true
				//业务代码
			},
			beforeEnter(el){
				//小球移动
				let bom = this.ball.el,
				react = dom.getBoundingClientRect(),
				x = window.innerWidth -rect.left -60,
				y = rect.top -25;
				el.style.display = '';
				el.style.transform = `translare3d(0, ${y}px, 0)`
				
				let inner = el.querySelector('.inner')
				el.style.transform = `translare3d(-${x}px, 0, 0)`
				
			},
			enter(el, done){
				let bom = this.ball.el;
				this._offset = document.body.offsetHeight;
				el.style.transform = `translare3d(0, 0, 0)`
				el.addEventListener('transitionend',done)
				let inner = el.querySelector('.inner')
				inner.style.transform = `translare3d(0, 0, 0)`
			},
			afterEnter(){
				this.ball.show = false
				el.style.display = 'none';
			}
		}
	}
</script>

<style lang="scss">
	.ball-wrap {
		.ball {
			position: fixed;
			right: 100upx;
			top: 50upx;
			z-index: 99;
			color: red;
			transition: all 1s cubic-bezier(0.49, -0.29, 0.75, 90.41);
		}
		.inner{
		    width: 28upx;
		    height:28upx;
			transition: all 1s linear;
		}
	}
</style>