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

购物车的动画是加完了,但是如何控制小球移入到购物车后让动画生效呢?于是先找到小球动画结束的方法,通过查资料找到了

transitionend

和

webkitAnimationEnd

两个方法,于是我对他们做了监听,当小球消失的时候在这两个方法中动态的增加Tabbar底部购物车的

keyframes

值.

 

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图炫耀一哈✿✿ヽ(°▽°)ノ✿

都看到这里啦,还不点赞支持下:smile:,鼓励下作者~ 三、重点来了:rocket::rocket:

我知道掘友们已经迫不及待的想看源码啦~当然本篇知识点只是整个项目的冰山一角,还有很多好用好玩的新技术,如 Better-scroll 滚动使用,高德地图的集成,图片瀑布流,移动端适配等等主流技术在这个项目中几乎都有~放个GitHub连接,掘友们可不要吝啬手中的小星星哦✿✿ヽ(°▽°)ノ✿