每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用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
在style.css里添加下面样式
.goods_cut {
background: url("../images/plus.gif") no-repeat scroll 0 0 transparent
border: 0 none
cursor: pointer
display: block
float: left
font-size: 0
height: 15px
line-height: 0margin: 8px 3px 0
width: 15px
}
input.goodsBuyBox, input.number {
border: 1px solid #DDDDDD
float: left
font-size: 10px
height: 18px
line-height: 18px
margin: 5px 6px 0
padding: 0
text-align: center
width: 32px
}
.goods_add {
background: url("../images/plus.gif") no-repeat scroll 0 -15px transparent
border: 0 none
cursor: pointer
display: block
float: left
font-size: 0
height: 15px
line-height: 0
margin: 8px 3px 0
width: 15px
}
在flow.dwt里，看各自的模板去修改，总之要找到这串代码：
<input type="text" name="goods_number[{$goods.rec_id}]" ……
下面是脚本，放进flow.dwt里
<script language="javascript" type="text/javascript">
function goods_cut($val){
var num_val=document.getElementById('number'+$val)
var new_num=num_val.value
if(isNaN(new_num)){alert('请输入数字')return false}
var Num = parseInt(new_num)
if(Num>1)Num=Num-1
num_val.value=Num
document.getElementById('updatecart').click()
}
function goods_add($val){
var num_val=document.getElementById('number'+$val)
var new_num=num_val.value
if(isNaN(new_num)){alert('请输入数字')return false}
var Num = parseInt(new_num)
Num=Num+1
num_val.value=Num
document.getElementById('updatecart').click()
}
</script>
找到
<input type="text" name="goods_number[{$goods.rec_id}]"
搜索不到你就搜goods_number就行了
替换为：
<span class="goods_cut" onclick="goods_cut('{$goods.rec_id}')"></span>
<input type="text" name="goods_number[{$goods.rec_id}]" id="number{$goods.rec_id}" value="{$goods.goods_number}" size="4" class="number" onblur="if(isNaN(this.value)){alert('请输入数字')return false}else{document.getElementById('updatecart').click()}" title="{$lang.goods_number_tip}"/>
<span class="goods_add" onclick="goods_add('{$goods.rec_id}')"></span>
找到
<input name="submit" type="submit" value="{$lang.update_cart}" class="btn_s3"/>
其实就是更新购物车的按钮
添加一个id=“updatecart”
<input name="submit" type="submit" id="updatecart" value="{$lang.update_cart}" class="btn_s3"/>
