每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
所以百度了一下前端使用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
el-row包裹一行，距下20px
el-col,一列 用法（el-col ：span="24", 1-24自由选择）
gutter： 指定栏与栏之间的间隔，默认为零。 用法 <el-row :gutter="20">
offset： 分栏偏移。 用法 <el-col :span="6" :offset="6">
将type属性赋值为 'flex'，可以启用 flex 布局，并可通过justify属性来指定 start, center, end, space-between（左右不留间隔）, space-around （左右也有间隔）其中的值来定义子元素的排版方式。
用法 <el-row type="flex" justify="center">
参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：xs、sm、md和lg。
通过设置类名为el-icon-iconName来使用即可。eg <i class="el-icon-edit"></i>
Button 组件默认提供7种主题，由type属性来定义，默认为default。
<el-button>默认按钮</el-button>
<el-button type="primary">默认按钮</el-button>
你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值。
<el-button :plain="true" :disabled="true">主要按钮</el-button>
type="success warning danger info"
自定义css??
.block:{padding:30px 24pxborder-bottom:#eff2f6}
.demonstration{font-size:14pxcolor:#8492a6line-height:44px}
.demo-button .intro-block .wrapper{float:rightmargin-right:20px}
.el-dropdown {display:inline-blockposition:relative}
el-table (--fit,--stripe,--border,,,)
- el-table__header-wrapper >table >thead >tr >th
- el-table__body-wrapper >table >tbody>tr(.el-table__row) >td
