【CSS动画】饿了么加入购物车抛物线动画实现
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了【CSS动画】饿了么加入购物车抛物线动画实现相关的知识,希望对你有一定的参考价值。
参考技术A每次吃饭点外卖的时候(暴露了自己是个死肥宅,手动滑稽),或者在淘宝购物的时候,将商品加入购物车时会有一个很炫酷的动画,如下图饿了么点餐动画:
所以百度了一下前端使用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
饿了么吗加入购物车球抛物
<template>
<div class="wrapper">
<div class="list-wrapper">
<div class="item">
<div class="left">
<img src="../../assets/images/stt.jpg" >
<a class="text-wrapper" href="javascript:;">
<span class="tit">【精选】巧克力草莓 约500g/份</span>
<span class="desc">鲜嫩多汁,入口即化,果肉细腻,果皮较薄</span>
<span class="sale">月售1024件;好评86%</span>
<span class="price">¥39.8</span>
</a>
</div>
<div class="right">
<div class="add">
<span :class="[‘opt‘,{active:count1>0}]" v-show="count1>0">-</span>
<span class="num" v-show="count1>0">{{count1}}</span>
<span class="opt active" @click="addCount(1,$event)">+</span>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="../../assets/images/stt.jpg" >
<a class="text-wrapper" href="javascript:;">
<span class="tit">四川不知火丑柑 约500g/份</span>
<span class="sale">月售1024件;好评72%</span>
<span class="price">¥6.6</span>
</a>
</div>
<div class="right">
<div class="add">
<span :class="[‘opt‘,{active:count2>0}]" v-show="count2>0">-</span>
<span class="num" v-show="count2>0">{{count2}}</span>
<span class="opt active" @click="addCount(2,$event)">+</span>
function(){ //技术指标 http://www.kaifx.cn/mt4/kaifx/1724.html
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="../../assets/images/stt.jpg" >
<a class="text-wrapper" href="javascript:;">
<span class="tit">【鲜切】菠萝 约250g/份</span>
更多java学习资料可关注:itheimaGZ获取
以上是关于【CSS动画】饿了么加入购物车抛物线动画实现的主要内容,如果未能解决你的问题,请参考以下文章