jQuery和CSS3创意添加到购物车动画特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款使用jQuery和CSS3制作的创意添加到购物车动画特效。该特效在用户点击“添加到购物车”按钮时，在屏幕右下角显示一个购物车图标级购物数量。当用户点击该购物车图标后，会展示出用户购物的明细。

使用方法

HTML结构

该添加到购物车特效的HTML结构分为2部分：.cd-cart-trigger是添加到购物车按钮，.cd-cart是购物车的明细。

<div class="cd-cart-container empty">
  <a href="#0" class="cd-cart-trigger">
    Cart
    <ul class="count"> <!-- cart items count -->
      <li>0</li>
      <li>0</li>
    </ul> <!-- .count -->
  </a>
 
  <div class="cd-cart">
    <div class="wrapper">
      <header>
        <h2>Cart</h2>
        <span class="undo">Item removed. <a href="#0">Undo</a></span>
      </header>
      
      <div class="body">
        <ul>
          <!-- products added to the cart will be inserted here using JavaScript -->
        </ul>
      </div>
 
      <footer>
        <a href="#0" class="checkout btn"><em>Checkout - $<span>0</span></em></a>
      </footer>
    </div>
  </div> <!-- .cd-cart -->
</div> <!-- cd-cart-container -->

div.body中的列表内容默认是空的，当某个商品被添加到购物车之后，通过JavaScript将其添加到列表中。

<div class="body">
  <ul>
    <li class="product">
      <div class="product-image">
        <a href="#0"><img src="img/thumb.jpg" alt="placeholder"></a>
      </div>
 
      <div class="product-details">
        <h3><a href="#0">Product Name</a></h3>
 
        <span class="price">$25.99</span>
 
        <div class="actions">
          <a href="#0" class="delete-item">Delete</a>
 
          <div class="quantity">
            <label for="cd-product-'+ productId +'">Qty</label>
            <span class="select">
              <select id="cd-product-'+ productId +'" name="quantity">
                <option value="1">1</option>
                <option value="2">2</option>
                <!-- ... -->
              </select>
            </span>
          </div>
        </div>
      </div>
    </li>
 
    <!-- 添加到购物车的其它内容 -->
  </ul>
</div>

CSS样式

.cd-cart和.cd-cart-trigger元素的定位方式使用固定定位，默认被移动到视口之外。当某个商品被添加到购物车之后，.cd-cart-container元素上的.emptyclass会被移除，购物车被显示出来。

.cd-cart-trigger,
.cd-cart {
  position: fixed;
  bottom: 20px;
  right: 5%;
  transition: transform .2s;
}
.empty .cd-cart-trigger, 
.empty .cd-cart {
  /* 隐藏购物车*/
  transform: translateY(150px);
}

在制作购物车动画的时候，div.wrapper元素被设置了固定的宽度和高度，它的尺寸和a.cd-cart-trigger尺寸相同。当购物车打开的时候，使用.cart-open class来对宽度和高度进行动画。

.cd-cart .wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  overflow: hidden;
  height: 72px;
  width: 72px;
  border-radius: 6px;
  transition: height .4s .1s, width  .4s .1s, box-shadow .3s;
  transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95);
  background: #ffffff;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17);
}
 
.cart-open .cd-cart .wrapper {
  height: 100%;
  width: 100%;
  transition-delay: 0s;
}

.deleted class用于从购物车中移除商品。被移除的商品使用绝对定位，并使用cd-item-slide-out class来为它们制作滑出动画效果。

.cd-cart .body li.deleted {
  /* this class is added to an item when it is removed form the cart */
  position: absolute;
  left: 1.4em;
  width: calc(100% - 2.8em);
  opacity: 0;
  animation: cd-item-slide-out .3s forwards;
}
 
@keyframes cd-item-slide-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}

如果用户点击了“Undo”按钮，.deleted class类会被移除，商品会被重新传入到列表中。

JAVASCRIPT

当用户点击了“添加到购物车”按钮，在Js代码中通过addProduct()方法将一个新的商品添加到.body > ul元素中。

function addProduct() {
  //this is just a product placeholder
  var productAdded = $('<li class="product"><div class="product-image"><a href="#0"><img src="img/product-preview.png" alt="placeholder"></a></div><div class="product-details"><h3><a href="#0">Product Name</a></h3><span class="price">$25.99</span><div class="actions"><a href="#0" class="delete-item">Delete</a><div class="quantity"><label for="cd-product-'+ productId +'">Qty</label><span class="select"><select id="cd-product-'+ productId +'" name="quantity"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option></select></span></div></div></div></li>');
  cartList.prepend(productAdded);
}

另外，updateCartCount()函数用于更新购物车的购物数量。updateCartTotal()函数用于统计购物总数。在添加和移除商品时它们会被动态执行。