html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果。下面会介绍我在项目中实现抛物运动的简单方法。
知识点:css3动画(抛物线运动)、vue动态绑定事件(控制小球出现)、vue过渡效果组件(小球进入和消失的过渡效果)、vue过渡效果组件中声明 JavaScript 钩子(控制小球消失)
效果图如下: 点击“添加购物车”,小球出现飞入到购物车,小球消失
一、用css3动画实现小球抛物线运动
css3动画(抛物线运动)
想要用css3动画实现一个抛物线运动并不容易,后来发现了一个在线工具,能够在线生成代码。
这里介绍一个在线生成运动效果的工具stylie http://jeremyckahn.github.io/stylie/
在线生成小球运动动画效果后,可以直接把生成的代码复制粘贴到自己项目中。(在线生成的代码有点多)
注意上图标出来的。在线生成的代码中播放次数是无数次的,所以复制到自己项目代码中的时候记得要修改
animation-iteration-count 属性定义动画的播放次数 infinite 规定动画应该无限次播放
二、控制小球出现
vue动态绑定事件(控制小球出现)
在组件中给【加入购物车】按钮添加一个事件方法,点击,小球出现
三、添加过渡效果
使用Vue中提供的 transition 组件 ,详情看文档
把小球div用 transition 组件包起来
css中:
这里要注意,要设置好小球过渡中的透明度
四、控制小球消失
可以在transition属性中声明 JS钩子,详情看文档
小球飞入购物车就这么实现啦~
为了展示效果,使用了gif 截图,顺便分享刚刚使用的一个方便好用的工具 LICEcap
项目中使用的图标来源于阿里巴巴矢量图标,轮播图的图片来源于百度。
html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...相关推荐
- 怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
- bing Map 在vue项目中的使用
写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map ...
- 在vue项目中使用gsap,实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果 一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码 总结 一.GSAP是什么? GSAP全称是G ...
- vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中 在el-table标签中添加v-load ...
- 在vue项目中使用第三方的字体图标库
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1.打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069 ...
- 如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
- 实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: ...
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
最新文章
- 前四次作业--个人总结
- 机器学习实战-逻辑回归-19
- fpga在线升级 linux_仅5000行Verilog代码、可在FPGA上跑轻量级Linux系统的RISC-V内核
- L - Clock Master Gym - 102798L
- 如何对 Jenkins 共享库进行单元测试
- 消息称小米之家全面取消员工销售提成 回应:内容严重偏颇失实
- 多实例linux自动启动,Linux 下自动启动多个oracle实例
- python字符串一(字符串的书写输入输出)
- android怎样降版本,Android7.0 APP降级方法
- nosql数据库之Redis持久化、备份和主从配置
- tp3.2 相同应用绑定多个入口文件,不同的入口文件可以绑定不同的模块
- 分享一个免费巨好用的shell工具
- Linux中vim命令详解
- 普中科技51单片机-单核-A2开发板实现简易计算器功能(矩阵键盘操作+数码管显示)
- FPGA之JESD204B接口——总体概要 实例 下
- 关于3.3V稳压芯片
- python函数定义时缩进的作用_定义函数时,函数体的正确缩进为?_学小易找答案
- lhgdialog弹出框组件 参数详解(自己曾经开发的fuzz项目中用到过)
- 联想服务器系统机房,联想10月1日完成收购IBM x86服务器
- Java ffmpeg视频压缩IOS播放没有声音问题解决(超级简单)