Vue实现商品飞入购物车效果(电商项目)

data () {
 return {
  showMoveDot: [], //控制下落的小圆点显示隐藏
 }

methods: {
addToCart (product, num) {
 this.showMoveDot = [...this.showMoveDot, true];
 }
}

<div
 v-for="(item,index) in showMoveDot"
 :key="index">
 <div class="move_dot"
   ref="ball"
   v-if="item">
 </div>
</div>

<transition appear
    @before-appear="beforeEnter"
    @after-appear='afterEnter'
    v-for="(item,index) in showMoveDot"
    :key="index.id">
 <div class="move_dot"
   ref="ball"
   v-if="item">
 </div>
 </transition>

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;
 }
}

beforeEnter (el) {
   // 设置transform值
   el.style.transform = `translate3d(${this.elLeft - 30}px,${this.elTop - 100}px , 0)`;
   // 设置透明度
   el.style.opacity = 0;
  },

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;
 }

data () {
 return {
  showMoveDot: [], //控制下落的小圆点显示隐藏
  elLeft: 0, //当前点击购物车按钮在网页中的绝对top值
  elTop: 0, //当前点击购物车按钮在网页中的绝对left值
  dropImage: '' // 小球图片
 }

<transition appear
     @after-appear='afterEnter'
     @before-appear="beforeEnter"
     v-for="(item,index) in showMoveDot"
     :key="index.id">
  <div class="move_dot"
    ref="ball"
    v-if="item">
   <!-- 小球图片 -->
   <img :src="/UploadFiles/2021-04-02/dropImage">

 
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图炫一哈"text-align: center">
但是有木有发现个问题,图片飞过去很突兀,直来直去的,不够友好,行那咱继续优化~~
优化二:飞入购物车的商品缩略图逐渐变小
哈哈~让商品飞入的时候逐渐变小,思来想去,还是用 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图炫一哈"text-align: center">
为啥我觉得还是有点突兀呢,没办法,处女座,必须让他更完美:see_no_evil:
优化三:购物车加入商品后弹簧效果
商品缩略小球逐渐变小的落入到购物车中,此时,购物车再来个弹簧效果就更美了,还是老办法用 css3 的 keyframes 再合适不过啦~
由于Tabbar是用的 Vant UI组件,在单独的 Dashboard.vue 文件中,所以在 Dashboard.vue 文件中给购物车这个图标设置 keyframes 值.


@keyframes carmove {
 0% {
 transform: scale(1);
 }
 25% {
 transform: scale(0.8);
 }
 50% {
 transform: scale(1.1);
 }
 75% {
 transform: scale(0.9);
 }
 100% {
 transform: scale(1);
 }
}




并且把这个 keyframes 值设置给购物车这个图标


.moveToCart {
 animation: mymove 0.5s ease-in-out;
}



购物车的动画是加完了,但是如何控制小球移入到购物车后让动画生效呢"1574749230111S" style="display: none"> 


afterEnter (el) {
  // 监听小球动画结束方法
  el.addEventListener('transitionend', () => {
  el.style.display = 'none';
  this.listenInCart();
  })
  // 监听小球动画结束方法
  el.addEventListener('webkitAnimationEnd', () => {
  el.style.display = 'none';
  this.listenInCart();
  })
 },


this.listenInCart() 方法是控制底部Tabbar购物车图标动画的方法,我们已经定义了一个class moveToCart ,我采用取巧的办法,当动画结束的时候,给Tabbar的购物车添加class moveToCart ,然后让他在500ms后在移除这个class,这样就会保证每次增加购物车后,底部Tabbar都会执行 keyframs 动画.


listenInCart () {
  // 拿到底部Tabbar购物车的DOM元素添加class
  document.getElementById("buycar").classList.add('moveToCart');
  setTimeout(() => {
  // 500毫秒后移除底部Tabbar购物车的DOM元素class
  document.getElementById("buycar").classList.remove('moveToCart');
  }, 500);
 }




此时算是真正的大功告成:cherry_blossom:,来个Gif图炫耀一哈"text-align: center">
都看到这里啦,还不点赞支持下:smile:,鼓励下作者~ 三、重点来了:rocket::rocket:
我知道掘友们已经迫不及待的想看源码啦~当然本篇知识点只是整个项目的冰山一角,还有很多好用好玩的新技术,如 Better-scroll 滚动使用,高德地图的集成,图片瀑布流,移动端适配等等主流技术在这个项目中几乎都有~放个GitHub连接,掘友们可不要吝啬手中的小星星哦"_blank" href="https://github.com/Geek-James/ddBuy">我看源码:rocket::rocket:
总结
以上所述是小编给大家介绍的Vue实现商品飞入购物车效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！