微信小程序 制作动态加入购物车特效

最近在做微信小程序项目，发现一个比较好玩的特效，如下图所示，现在贴出代码共享给大家：

XML:

view class="main">
    
        
        
            
                
                {{totalNum}}
            
        
        
            数量  {{num}}
            +
            加入购物车
            
        
        
        {{goods.stock}}
        {{goods.title}}
        ￥ {{goods.price}}
    
    
        商品详情
        产品参数
        售后保障
        
            {{goods.detail}}
            {{goods.parameter}}
            {{goods.service}}
        
    

 CSS:

@import '../../common/common.wxss';

.goods-box{
    position: relative;
    padding: 40rpx 45rpx;
    text-align: center;
    color: #454552;
    border-bottom: 30rpx solid #ededed;
}
.goods-box .goods-thumb{
    width: 300rpx;
    height: 300rpx;
    margin: 35rpx 0 125rpx;
}

.to-carts-icon{
    position: absolute;
    right: 70rpx;
    top: 70rpx;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    opacity: .6;
    -webkit-animation: to_cart 10s ease-out;
    animation: to_cart 10s ease-out;
}
@-webkit-keyframes to_cart {
    0%{
        right:100rpx;
        top:530rpx;
        -webkit-transform: scale(4);
    }
    /*60%{
        top: 20rpx;
    }*/
}
@keyframes to_cart {
    0%{
        right:100rpx;
        top:530rpx;
        transform: scale(4);
    }
    /*60%{
        top: 20rpx;
    }*/
}
.carts-icon{
    position: absolute;
    right: 40rpx;
    top: 40rpx;
    width: 75rpx;
    height: 75rpx;
}
.carts-icon image{
    width: 100%;
    height: 100%;
}
.carts-icon.on{
    -webkit-animation: to_cart_scale .3s ease;
    animation: to_cart_scale .3s ease;
}
@-webkit-keyframes to_cart_scale {
    50%{
        -webkit-transform: scale(1.2);
    }
}
@keyframes to_cart_scale {
    50%{
        transform: scale(1.2);
    }
}
.carts-icon-num{
    position: absolute;
    left: -15rpx;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 50%;
    background: #AB956D;
    color: #fff;
    font-size: 24rpx;
}
.goods-box .goods-operation{
    position: relative;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 50rpx;
    margin-bottom: 60rpx;
    box-sizing: border-box;
    border-radius: 50rpx;
    background: #AB956D;
    color: #fff;
    font-size: 28rpx;
}
.goods-operation text{
    display: inline-block;
    height: 100rpx;
}
.goods-operation-num{
    width: 160rpx;
}
.goods-operation-add{
    width: 80rpx;
    margin-right: 30rpx;
}
.goods-to-cart{
    width: 210rpx;
    padding-right: 75rpx;
}
.goods-cart-img{
    position: absolute;
    right: 50rpx;
    top: 28rpx;
    width: 45rpx;
    height: 45rpx;
}

.goods-stock{
    font-size: 28rpx;
    margin-bottom: 20rpx;
}
.goods-title{
    font-size: 40rpx;
    margin-bottom: 30rpx;
}
.goods-price{
    font-size: 40rpx;
}
.goods-tab-nav{
    display: inline-block;
    width: 33.33%;
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 1rpx solid #ededed;
    box-sizing: border-box;
    text-align: center;
    color: #c7c7cb;
}
.goods-tab-nav.on{
    color: #bcaa8a;
    border-bottom: 5rpx solid #bcaa8a;
}
.goods-content{
    padding: 40rpx;
}

JS:

 
Page({
  data:{
    goods: {
      id: 1,
      image: '/image/goods1.png',
      title: '新鲜梨花带雨',
      price: 0.01,
      stock: '有货',
      detail: '这里是梨花带雨详情。',
      parameter: '125g/个',
      service: '不支持退货'
    },
    num: 1,
    totalNum: 0,
    hasCarts: false,
    curIndex: 0,
    show: false,
    scaleCart: false
  },

  addCount() {
    let num = this.data.num;
    num++;
    this.setData({
      num : num
    })
  },

  addToCart() {
    const self = this;
    const num = this.data.num;
    let total = this.data.totalNum;

    self.setData({
      show: true
    })
    setTimeout( function() {
      self.setData({
        show: false,
        scaleCart : true
      })
      setTimeout( function() {
        self.setData({
          scaleCart: false,
          hasCarts : true,
          totalNum: num + total
        })
      }, 200)
    }, 300)

  },

  bindTap(e) {
    const index = parseInt(e.currentTarget.dataset.index);
    this.setData({
      curIndex: index
    })
  }
 
})