购物车动画实现

先看一下实现的效果图：

微信的 .wxml文件：

  <view class="container">
    <swiper indicator-dots>
      <block wx:for="{{goods.image}}" wx:key="{{index}}">
        <swiper-item>
          <image src="{{item}}" mode="aspectFit" />
        </swiper-item>
      </block>
    </swiper>

    <!-- 加入购物车组件 -->
    <view class="goods-operation">
      <!-- <image wx:if="{{show}}" src="/image/cart1.png" class="to-carts-icon"></image> -->
      <text class="goods-operation-num">数量</text>
      <text class="goods-operation-add" bindtap="addCount">+</text>
      <text class="goods-operation-num">{{num}}</text>
      <text class="goods-operation-sub" bindtap="subCount">-</text>
      <text class="goods-to-cart" bindtap="addToCart">加入购物车</text>
      <image src="../../image/cart1.png" class="goods-cart-img" bindtap="addToCart"></image>
    </view>
    <view class="goods-box">
    <image wx:if="{{show}}" src="/image/cart1.png" class="to-carts-icon"></image>
      <view class="goods-stock">{{goods.stock}}</view>
      <view class="goods-title">{{goods.title}}</view>
      <view class="goods-price">￥ {{goods.price}}</view>

    </view>

    <!-- 底部的固定栏 -->
    <view class="fixedBottom">
      <navigator open-type="switchTab" url="../cart/cart" class="nav-bott">
        <view class="carts-icon {{scaleCart?'on':''}}">
          <image src="../../image/cart2.png"></image>
          <text class="carts-icon-num" wx:if="{{hasCarts}}">{{totalNum}}</text>
        </view>
      </navigator>
    </view>
  </view>

js文件：

// pages/detail/detail.js
Page({
  data: {
    goods: {
      id: 1,
      image: [
        '/image/goods1.png',
        '/image/goods2.png',
        '/image/goods3.png'
      ],
      title: '新鲜梨',
      price: 0.01,
      stock: '有货',
      detail: '这里是梨的详情。',
      parameter: '125g/个',
      service: '不支持退货',
      scaleCart: false
    },
    num: 1,
    totalNum: 0,
    hasCarts: false,
    curIndex: 0,
    show: false,
    scaleCart: false
  },
  addCount() {
    let that = this
    that.setData({
      num: that.data.num + 1
    })
  },
  subCount() {
    let that = this
    that.setData({
      num: that.data.num - 1
    })
  },
  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)

  },

  onLoad: function(options) {

  },
  onReady: function() {

  },
  onShow: function() {

  },
  onHide: function() {

  },
  onUnload: function() {

  },
  onPullDownRefresh: function() {

  },
  onReachBottom: function() {

  },
  onShareAppMessage: function() {

  }
})

.wxss文件：

/* pages/detail/detail.wxss */

swiper {
  height: 375rpx;
  text-align: center;
}

swiper image {
  height: 100%;
}

/* 加入购物车组件 */

.goods-operation {
  position: relative;
  padding: 0 50rpx;
  margin: 20rpx 40rpx;
  background-color: #ab956d;
  text-align: center;
  border-radius: 40rpx;
  height: 100rpx;
  color: #ffff;
  line-height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中 */
}

.goods-operation image {
  width: 45rpx;
  height: 45rpx;
}

/* 固定的底部栏 */

.fixedBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: pink;
}

.fixedBottom navigator {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100;
  height: 100%;
}

.fixedBottom navigator .carts-icon {
  width: 75rpx;
  height: 75rpx;
}

.fixedBottom navigator image {
  width: 100%;
  height: 100%;
}

/* 放入购物车，购物车按钮稍微放大一点的动画效果 */

@keyframes to_cart_scale {
  50% {
    transform: scale(1.2);
  }
}

.carts-icon.on {
  animation: to_cart_scale 0.3s ease;
}

.carts-icon {
  position: relative;
}

/* 购物车左边的物品数字显示 */

.carts-icon-num {
  position: absolute;
  left: -15rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 50%;
  background: #ab956d;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
}

.goods-box {
  position: relative;
  padding: 40rpx 45rpx;
  text-align: center;
  color: #454552;
  border-bottom: 30rpx solid #ededed;
}

.goods-stock {
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.goods-title {
  font-size: 40rpx;
  margin-bottom: 30rpx;
}

.goods-price {
  font-size: 40rpx;
}

/* 扔进去的过程，起步位置 */

@keyframes to_cart {
  0% {
    right: 80rpx;
    top: -20rpx;
    transform: scale(5);
    width: 10rpx;
    height: 10rpx;
  }

  100% {
    right: 430rpx;
    top: 900rpx;
    width: 5rpx;
    height: 5rpx;
  }
}

/* 点击加入购物车，扔出去的物品动画 */

.to-carts-icon {
  position: absolute;
  border-radius: 50%;
  opacity: 1;
  animation: to_cart 0.3s ease-out;
}