每次吃饭点外卖的时候(暴露了自己是个死肥宅,手动滑稽),或者在淘宝购物的时候,将商品加入购物车时会有一个很炫酷的动画,如下图饿了么点餐动画:
所以百度了一下前端使用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
这个嘛。。。有点难度,我给你整理下,你要给我好评啊,顺带给加点分吧。/*
所有页面都所使用模块的样式
css.css
只要在所有页面出现过的区块都写在这里,包括布局的样式
/*
首页所使用模块的样式
css_index.css
只要在首页出现过的区块都写在这里,包括布局的样式
/*
在商品首页及促销模块列表中所使用的样式
css_products.css 商品首页及促销模块页面所用到的样式
/*
商品小类页面使用的样式
css_list.css 商品小类页面所用到的样式
css_list1.css 商品小类页面所用到的样式
css_list2.css 商品小类页面所用到的样式
/*
关于产品大类及商品详细的样式
css_Cate.css 产品大类及商品详细所用到的样式
/*
关于文章的的样式
css_events.css 文章类的样式
/*
其他应用模块样式
css_others.css 部分配套模块页面所用到的样式
/*
注册认证使用的样式
css_user.css 注册认证中所有页面所用到的样式
/*
会员中心使用的样式
css_member.css 会员中心中所有页面所用到的样式
/*
购物流程中所使用到的样式
css_Cart.css 购物流程中所有页面所用的样式