<transition appear @before-appear="beforeEnter" @after-appear='afterEnter' v-for="(item,index) in showMoveDot" :key="index.id"> <div ref="ball" v-if="item"> </div> </transition>
上面Dom代码的两个方法 beforeEnter 和 afterEnter 方法分别是动画初次渲染前和动画渲染后,那么我们就要把注意点放到这两个状态中. 在初次渲染的时候我们确定下小球的位置,那么这个时候我们就要用到一个方法 getBoundingClientRect ,这个方法返回的是一组矩形的集合,这下就好啦,可以通过这个方法来定位某个元素在屏幕中的位置啦:blush:~
那好,那我们这个时候就成热打铁,通过这个方法先来确定点击购物车图标的时候,购物车这个小图标距左边和顶部相对屏幕的距离。
定义两个 data 来接受点击增加购物车图标获取到的值.
data () { return { showMoveDot: [], //控制下落的小圆点显示隐藏 elLeft: 0, //当前点击购物车按钮在网页中的绝对top值 elTop: 0, //当前点击购物车按钮在网页中的绝对left值 }
然后我们在点击添加购物车的方法里获取位置。
methods: { addToCart () { this.showMoveDot = [...this.showMoveDot, true]; this.elLeft = event.target.getBoundingClientRect().left; this.elTop = event.target.getBoundingClientRect().top; } }
此时就获取到了点击加入购物车图标的位置啦:v:这个时候离成功进了一大半~ 获取到增加购物车图标的距离后,通过相对位置来确定商品缩略小球的位置,于是在动画渲染前我们设置下他的 transform 值,x,y的值自己可以调整,并且让他的透明度为0,暂时不显示.
beforeEnter (el) { // 设置transform值 el.style.transform = `translate3d(${this.elLeft - 30}px,${this.elTop - 100}px , 0)`; // 设置透明度 el.style.opacity = 0; },
接下来就是关键,如何让小球从当前位置移动到底部 Tabbar 的购物车中呢?同样的方法,我们通过 getBoundingClientRect 方法来确定底部Tabbar的购物车徽标的 left 和 top 值,获取到这个值后,就让小球在当前位置,以贝塞尔曲线的方式向购物车x和y的方向移动,当移动完成后将数组 showMoveDot 的属性设置为 false 且透明度为1.
在小球绘制完成后的方法中
afterEnter (el) { // 获取底部购物车徽标 const badgePosition = document .getElementById("buycar") .getBoundingClientRect(); // 设置小球移动的位移 el.style.transform = `translate3d(${badgePosition.left + 30}px,${badgePosition.top - 30}px,0)` // 增加贝塞尔曲线 el.style.transition = 'transform .88s cubic-bezier(0.3, -0.25, 0.7, -0.15)'; el.style.transition = 'transform .88s linear'; this.showMoveDot = this.showMoveDot.map(item => false); // 设置透明度 el.style.opacity = 1; }
此时大功告成!点击添加购物车按钮,小球可以曲线飞到购物车中了,来个Gif图炫耀下✿✿ヽ(°▽°)ノ✿
掘友请留步(╥╯^╰╥)你以为这样就算完成了嘛~对于Geek:monkey_face:来说,这样的效果,简直太Low啦,于是乎,咱们继续一起来做个优化吧~
阶段三 体验优化优化一:把小球变成点击当前商品的图片
刚开始还真TM把我给难住了,这么多图片,鬼知道显示哪个呢?后来灵机一动,不就是个动态加载图片嘛,点击加入购物车的时候当前的商品对象已经拿到了,你怕啥,直接取就完啦!~so easy:smile:好,思路有了,那咱就上代码!
1.在data中追加个 dropImage 属性.
data () { return { showMoveDot: [], //控制下落的小圆点显示隐藏 elLeft: 0, //当前点击购物车按钮在网页中的绝对top值 elTop: 0, //当前点击购物车按钮在网页中的绝对left值 dropImage: '' // 小球图片 }
2.在Dom中通过动态绑定的方式来获取 dropImage
<transition appear @after-appear='afterEnter' @before-appear="beforeEnter" v-for="(item,index) in showMoveDot" :key="index.id"> <div ref="ball" v-if="item"> <!-- 小球图片 --> <img :src="dropImage" alt=""> </div> </transition>
3.动态给 dropImage 赋值
addToCart (product) { // 取出商品的图片 this.dropImage = product.small_image; // 将商品添加到购物车中 this.ADD_TO_CART(product); // 购物车左边的 this.elLeft = event.target.getBoundingClientRect().left; this.elTop = event.target.getBoundingClientRect().top; this.showMoveDot = [...this.showMoveDot, true]; },
好啦!此时我们就完成了小球图片的动态加载,来个Gif图炫一哈✿✿ヽ(°▽°)ノ✿
但是有木有发现个问题,图片飞过去很突兀,直来直去的,不够友好,行那咱继续优化~~
优化二:飞入购物车的商品缩略图逐渐变小哈哈~让商品飞入的时候逐渐变小,思来想去,还是用 css3 的 keyframes 来搞比较好,废话不多说直接上代码.
1.设置 keyframes 的值