仿饿了吗购物车列表的效果

实现效果：

   

 

 

 

 

代码：第一张图的效果

<transition name="fold">
      <div class="shopcart-list" v-show="listShow">
        <div class="list-header">
          <h1>购物车</h1>
          <span>清空</span>
        </div>
        <div class="list-content">
          <ul>
            <li class="food clear" v-for="(food, i) in foods" :key="i">
              <div class="name">{{food.name}}</div>
              <div class="price">
                <span>￥{{food.price * food.count}}</span>
              </div>
              <cart-control :food="food" class="cart-add-sub"></cart-control>
            </li>
          </ul>
        </div>
      </div>
    </transition>

// 折叠与显示的动画
  .shopcart-list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    transform: translate3d(0, -100%, 0);
    &.fold-enter-active,
    &.fold-leave-active {
      transition: all 0.5s linear;
      transform: translate3d(0, -100%, 0);
    }
    &.fold-enter,
    &.fold-leave-active {
      transform: translate3d(0, 0, 0);
    }

 

参考：https://blog.csdn.net/qq_22317389/article/details/80391407

 

第二张图的效果：参考：https://www.cnblogs.com/yujihang/p/6886532.html

 

<div class="cartcontrol-wrapper">
    <div class="cartcontrol">
      <!-- 外层渐变,减号图标-->
      <transition name="fade">
        <div
          class="cart-decrease"
          v-show="food.count > 0"
          @click.stop.prevent="subCart(food)"
        >
          <!-- 内层滚动，滚动时包含字体，字体在inner中-->
          <transition name="inner">
            <i class="iconfont icon-jianhao inner"></i>
          </transition>
        </div>
      </transition>
      <transition name="count">
        <div class="cart-count" v-show="food.count > 0">{{ food.count }}</div>
      </transition>
      <div class="cart-add" @click.stop.prevent="addCart(food)">
        <i class="iconfont icon-jiahao"></i>
      </div>
    </div>
  </div>

 

// 动画---显示
    .cart-decrease {
      float: left;
      @include wh(1.25rem, 1.25rem);
      background-color: $blue;
      border-radius: 50%;
      margin-top: 0.3125rem;
      transform: translate3d(0, 0, 0);
      transform: rotate(180deg);
      // 进入动画的状态/离开动画时生效
      &.fade-enter-active,
      &.fade-leave-active {
        transition: all 0.5s linear;
        // opacity: 1;
        // transform: translate3d(0, 0, 0);
      }
      // 动画的开始状态，动画一开始透明度要设为0 / 离开动画的结束状态
      &.fade-enter,
      &.fade-leave-active {
        opacity: 0;
        transform: translate3d(56px, 0, 0);
      }
      .inner {
        @include inbwh(100%, 100%);
        color: #fff;
        text-align: center;
        line-height: 1.125rem;
        font-weight: 700;
        font-size: 0.875rem;
        &.inner-enter-active,
        &.inner-leave-active {
          transition: all 0.5s linear;
          // opacity: 1;
          transform: rotate(0);
        }
        &.inner-enter,
        &.inner-leave-active {
          opacity: 0;
          transform: rotate(180deg);
        }
      }
    }