求助:用css写类似淘宝购物车步骤条

求助:用css写类似淘宝购物车步骤条,第1张

1、首先是计算一行的价格。这个功能在上篇博客里有提到,这里就不列举出来了。

2、遍历选中的几行氏樱,将歼启丛每行的数值相加。

3、将值赋给总金额显示出来。当取消勾选或加减数量旁闷时,金额会相应改变。

每次吃饭点外卖的时候(暴露了自己是个死肥宅,手动滑稽),或者在淘宝购物的时候,将商品加入购物车时会有一个很炫酷的动画,如下图饿了么点餐动画:

所以百度了一下前端使用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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11971446.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存