css将商品加入购物车,vue实现点击商品加入购物车动画
如今这么发达,想必大家都用饿了么点过餐吧?当你选择商品加入购物车,小球飞入的动画是不是很炫酷?,大体是下边这个样子
GIF.gif
怎么样,炫酷吧?今天我们也来试着实现这个动画!
首先,你需要知道vue的状态过度动画,官方文档介绍的很详细,这里我就不多解释了。作者语文底子不好,直接上代码了(使用vue-cli),详细逻辑及思路都在代码注释中
这是购物车
name="drop"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
export default {
name: "demo",
data() {
return {
balls: [
// 这里定义了多个ball,是因为可能同时有多个小球在动画中(快速点击多次或者多个商品)
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
}
],
dropBalls: [] // 在动画中的小球集合
};
},
methods: {
addGoods(e) {
let el = e.target;
this.balls.forEach(v => {
if (!v.show) {
v.show = true; // 当切换元素的display:block/none时,会触发vue的动画
v.el = el; // 将触发点击事件的“+”号保定道小球对象上,方便获取动画初始时的位置
this.dropBalls.push(v); // 取一个小球加入动画队列
return;
}
});
},
beforeEnter(el) {
let count = this.balls.length;
while (count--) {
// 将动画队列中的小球,依次处理
let ball = this.balls[count];
if (ball.show) {
let rect = ball.el.getBoundingClientRect(); //拿到点击的“+”号的位置,这里不直接取值(我是用的绝对定位,当然可以直接取值)的原因是,商品列表中每个加号的位置是不固定的,如果上下滑动了,这个位置就不确定
let x = rect.left - 70; // 需要偏移的x向距离
let y = -(window.innerHeight - rect.top - 65); // 需要偏移的y向距离
el.style.display = ""; // 当前状态下,display值为none,将其置空。
// 这里需要注意了,小球飞入的动画分两个维度,X轴和Y轴,因此
el.style.webkitTransform = `translate3d(0px, ${y}px, 0px)`; // 首先将“ball”Y向移动至“+”好位置
el.style.transform = `translate3d(0px, ${y}px, 0px)`;
// 接着将“inner-hook”X向移动至“+”号处,其实此时外层“ball”的X位置没有动,但因为背景色等等样式只应用于“inner-hook”上,因此,视觉效果上,这个小球是移动到了“+”号的位置
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
inner.style.transform = `translate3d(${x}px, 0, 0)`;
}
}
},
enter(el) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight; // 主动触发浏览器重绘
this.$nextTick(() => {
el.style.webkitTransform = "translate3d(0, 0, 0)"; //接着将小球位置置为初始值,但css中设置了transition .8s,因此,动画效果就出来了
el.style.transform = "translate3d(0, 0, 0)";
let inner = el.getElementsByClassName("inner-hook")[0];
inner.style.webkitTransform = "translate3d(0, 0, 0)";
el.style.transform = "translate3d(0, 0, 0)";
});
},
afterEnter(el) {
let ball = this.dropBalls.shift(); //结束后,将这个活动中的小球删除
if (ball) {
ball.show = false;
el.style.display = "none"; // 并且将其设为不可见
}
}
}
};
.demo
.addBtn
position: absolute;
top: 50px;
right: 50px;
width: 20px;
height: 20px;
background: blue;
border-radius: 50%;
.cart
position: absolute;
left: 30px;
bottom: 30px;
width: 100px;
text-align: center;
height: 50px;
line-height: 50px;
border: 1px solid #ccc;
.ball
position: fixed;
z-index: 100;
left: 70px;
bottom: 45px;
&.drop-enter-active
transition: all 0.8s cubic-bezier(0.49, -0.29, 0.75, 0.41);
.inner
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
transition: all 0.8s;
分步操作如下图:
GIF1.gif
好了,今天就这么多了
css将商品加入购物车,vue实现点击商品加入购物车动画相关推荐
- css线加点的进度,纯CSS实现的交互式进度条(点击带进度填充动画)
CSS 语言: CSSSCSS 确定 .bar { display: flex; flex-direction: row-reverse; margin: auto auto 0; width: 30 ...
- vue实现点击箭头的旋转动画(收起展开)效果
实现方法:用vue动态绑定class的方法,实现用不同的class渲染箭头,达到点击箭头的旋转效果 模板的内容: //这里是箭头图片 <img :class="{ 'arrowTran ...
- 用vue和node写的简易购物车
[新增vue中使用pug模板] 在webpack.config.js引入pug的loader,就可以在vue中使用pug模板. module: {loaders: [{test: /\.vue$/,l ...
- Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品详情页的展示) 一.商品排序 1.完善页面信息 这是用来做排序的,默认按照综合排序 ...
- Vue小案例 之 商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"><!--logo title--><div class= ...
- java基于Springboot+vue的校园二手闲置商品交易平台系统 element
本系统地描绘了整个网上二手交易平台的设计与实现,主要实现的功能有以下几点:管理员:首页.个人中心.用户管理.卖家管理.商品分类管理.商品信息管理.二手订单管理.商品求购管理.管理员管理.留言板管理.系 ...
- SpringBoot--网上商城项目(自定义的参数解析器、购物车后台前台功能、商品详情页)
目录 一.自定义的参数解析器 关于Mybatis-plus时间字段代码生成问题 报错信息:Caused by: java.lang.IllegalStateException: No typehand ...
- Vue实战之 9.商品管理 -- 商品列表
1. 商品管理概述 商品管理模块用于维护电商平台的商品信息,包括商品的类型.参数.详情等.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能. 2. 商品列表 实现商品列表布局效果 调用后台接 ...
- 商品管理系统商品分页,增删改查的实现增加购物车的功能Cart
添加购物车前提条件:你的商品的页面有已经设计成功,有全选,全不选,反选这些操作的实现 通过checkbox复选框的id进行添加商品,从而获取商品的名字和其他的信息 增加成功后通过Ajax请求进行相关的 ...
- Vue.js-小demo实现简单的游戏购物车table
Vue.js-小demo实现简单的游戏购物车table 最近通过学习vue框架,基本熟悉了其中的动态绑定属性,计算属性,监听,条件判断,循环遍历,所以通过一个小demo来巩固一下.这个小demo主要是 ...
最新文章
- 我决定开发自己的第一款iPhone应用
- HTML5新增的一些特性
- spring boot jar包_「Spring Boot 新特性」 jar 大小自动瘦身
- electron ant-design-vue 不能用_基于 Electron 桌面消息管理客户端iGot
- ERA5、ERA-interm是啥
- libevent源码深度剖析一
- Nature封面:城里人为什么容易路痴?
- linux mysql 开启异步io_Linux 异步IO介绍
- leetcode —— 6. Z 字形变换
- [LeetCode]657.Judge Route Circle
- 一个简单的iBatis入门例子
- 08.存储Cinder→5.场景学习→08.Backup Volume→2.实操
- ZBrush中的法线贴图你知道吗?
- 计算机菜单的作用是,菜单
- 记一次拆机除尘换硅脂的经历,第一次拆机幸好没拆坏,心真大-_-!
- picker多选 vant_vant框架picker选择器形式列表,以及封装
- 用java写敏感词过滤器的代码
- Android之ION内存管理分析
- 关于zIndex的问题
- zigbee芯片厂家对比
热门文章
- Windows RDP的RCE漏洞分析和复现(CVE-2019-0708)
- 【三维激光扫描】第一章:三维激光扫描入门基础知识
- matlab如何编newton-raphson,Matlab中的Newton Raphsons方法?
- steam linux 安装目录,如何在Ubuntu中安装Steam | MOS86
- hse是什么意思的缩写_什么是HSE
- linux 查看opengl版本,如何使用optirun检查Linux系统上支持哪个版本的OpenGL?
- 切比雪夫带通滤波器 matlab,MATLAB|切比雪夫低通滤波器设计与滤波实现
- python——金融商品多种均线指标综合运用模拟实现(MACD模型)
- 根据身份证号匹配对应的城市编码
- linux版qq怎么传文件,QQ for linux终于能在线传送文件了~