每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。
在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：
开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。
主要用到的是移动端适配方案：flexible.js + rem的方案
首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息
方案一：使用定位+transition的方式实现
方案二：使用transform + transition的方式实现
其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。
初识CSS抛物线动画
https://github.com/HyFun/CSS-Sample-ElemeAnimate
1、首先是计算一行的价格。这个功能在上篇博客里有提到，这里就不列举出来了。2、遍历选中的几行，将每行的数值相加。
3、将值赋给总金额显示出来。当取消勾选或加减数量时，金额会相应改变。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="---.css">
<script src="---.js"></script>
</head>
<body>
<div class="container">
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">----</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥50.13</span>
</div>
<div class="operation">
<div>---</div>
<div>---</div>
</div>
</div>
</div>
</div>
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥9.90</span>
</div>
<div class="operation">
<div>移入收藏夹</div>
<div>删除</div>
</div>
</div>
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>---</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥19.9</span>
</div>
<div class="operation">
<div>移入收藏夹</div>
<div>删除</div>
</div>
</div>
</div>
</body>
</html>
.container{
width: 1000px
margin-left: auto
margin-right: auto
color: #444444
}
.header{
margin: 8px
}
.shop-icon, .wangwang-icon, .promotion-icons span{
display:inline-block
width: 15px
height: 15px
background-color: rgb(117,192,241)
}
.promotion-icons span{
margin-right: 4px
}
.items{
border: 1px solid #ebe9e9
}
.item{
display: flex
margin: 8px
}
.item-img{
width:100px
height: 100px
display: inline-block
background-color: aquamarine
margin-left: 6px
margin-right: 6px
}
.item-name
{
display: flex
flex-direction: column
justify-content: space-between
}
.sku, .price,.item-price-total,.operation,.num-control{
margin-left: 18px
}
.num{
width: 18px
height: 15px
}
.num-control{
display: flex
align-items: baseline
}
.num-minus,.num-plus{
width: 18px
height: 22px
display: inline-block
background-color: #ebe9e9
}
.checkout{
display: flex
justify-content: space-between
}
.shop{
margin-bottom: 20px
margin-top: 30px
}
.goods,.freight,.checkout-button{
margin-left: 15px
}
.price-1{
text-decoration: line-through
color: gray
}
.check-num ,.total-price{
font-size: large
color: red
margin-left: 3px
margin-right: 3px
}
.checkout-button{
height: 30px
width: 50px
background-color: beige
}
.checkout{
margin-top: 15px
}
.item-name{
width: 25%
}
.item-price-total{
width: 5%
}
.sku{
width: 20%
}
function updatePrice(){
let items = document.querySelectorAll('.item')
let totalNum = 0
let totalPrice = 0
items.forEach(function(item){
if(item.querySelector('.item-checkbox').checked){
let num = item.querySelector('.num').value
totalNum = totalNum + parseInt(num)
let price = item.querySelector('.price-2').getAttribute('data-price')
totalPrice = totalPrice + parseFloat(price) * num
}
})
document.querySelector('.check-num').innerText= totalNum
document.querySelector('.total-price').innerText = totalPrice
}
window.onload=function(){
let itemCheckboxes = document.querySelectorAll('.item-checkbox')
itemCheckboxes.forEach(function(itemCheckbox){
itemCheckbox.onchange = function(){
updatePrice()
}
})
let minuses = document.querySelectorAll('.num-minus')
minuses.forEach(function(minus){
minus.onclick = function(event){
let num=minus.parentElement.querySelector('.num').value
if(parseInt(num)>1)
{
minus.parentElement.querySelector('.num').value=parseInt(num)-1
updatePrice()
}
}
})
let pluses = document.querySelectorAll('.num-plus')
pluses.forEach(function(plus){
plus.onclick = function(event){
let num=plus.parentElement.querySelector('.num').value
plus.parentElement.querySelector('.num').value=parseInt(num)+1
updatePrice()
}
})
}
