jQuery和CSS3创意添加到购物车动画特效 |其他|下载

简要教程

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

使用方法

HTML结构

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


  
    Cart
     
      0
      0
    
 
  
 
  
    
      
        Cart
        Item removed. Undo
      
      
      
        
          
        
      
 
      
        Checkout - $0

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


  
    
      
        
      
 
      
        Product Name
 
        $25.99
 
        
          Delete
 
          
            Qty

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 = $('
Product Name
$25.99DeleteQty');
  cartList.prepend(productAdded);
}