:key="index.id">
<div class="move_dot"
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 的值
@keyframes mymove {
0% {
transform: scale(1);
}
25% {
transform: scale(0.8);
}
50% {
transform: scale(0.6);
}
75% {
transform: scale(0.4);
}
100% {
transform: scale(0.2);
}
}2.给商品缩略图添加
并加入 animation
keyframes
img {
animation: 0.88s mymove ease-in-out;
width: 3rem;
height: 3rem;
border-radius: 50%;
}好嘞,搞定!来个Gif图炫一哈✿✿ヽ(°▽°)ノ✿
为啥我觉得还是有点突兀呢,没办法,处女座,必须让他更完美:see_no_evil:
优化三:购物车加入商品后弹簧效果
商品缩略小球逐渐变小的落入到购物车中,此时,购物车再来个弹簧效果就更美了,还是老办法用
css3 的
keyframes 再合适不过啦~由于Tabbar是用的
Vant UI组件,在单独的
Dashboard.vue
