使用vue模拟购物车小球动画
使用vue模拟购物车小球动画
1.效果演示
2.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue-2.4.0.js"></script>
<script src="../js/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flage=!flage">
<!--1.使用transition元素 把小球包裹起来-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<div class="ball" v-show="flage"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flage: false
},
methods: {
//钩子函数的第一个参数el:表示要执行动画的那个元素 是个原生的js dom对象
//document.getElementById() 可以认为他是通过这种方式获取的
beforeEnter:function (el) {
//beforeEnter表示动画入场之前 动画开始 可以再beforeEnter中设置元素的起始样式
//设置小球开始动画以前的起始位置
el.style.transform="translate(0,0)";
},
enter:function (el,done) {
//这句话没有实际的作用 但是不写出不来效果
//el.offsetWidth可以认为可以强制刷新动画
el.offsetWidth
//enter表示动画开始之后的样式这里可以设置小球完成动画之后的结束状态
el.style.transform="translate(150px,450px)";
el.style.transition="all 1s ease"
done()
},
afterEnter:function (el) {
//动画完成后
this.flage=!this.flage;
}
}
})
</script>
</body>
</html>
使用vue模拟购物车小球动画的更多相关文章
- Vue实现购物车小球动画
思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...
- vue.js加入购物车小球动画
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...
- css贝塞尔曲线模仿饿了么购物车小球动画
在线观看贝塞尔曲线值:传送门 在线观看动画效果:传送门 代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Vue实现购物小球抛物线
.shop{ position: fixed; top: 300px; left: 40px; } .ball{ position: fixed; left: 32px; bottom: 22px; ...
- vue 2.0 购物车小球抛物线
备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <trans ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- “完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点 ...
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
随机推荐
- python操作数据库-安装
首先是下载软件: 链接:http://pan.baidu.com/s/1nvp1imX 密码:6i0x 之后就是一系列设置. 安装教程:自行百度就行.需要注意的是设置my.ini时,需要加上这些东西( ...
- UVa 11167 Monkeys in the Emei Mountain (最大流)
题意:雪雪是一只猴子.它在每天的 2:00 —— 9:00之间非常渴,所以在这个期间它必须喝掉2个单位的水.它可以多次喝水,只要它喝水的总量是2.它从不多喝,在一小时内他只能喝一个单位的水.所以它喝水 ...
- windows下命令提示符中有空格路径的解决方法
1)用缩写.比如c:\Program Files 缩写为c:\Progra~1 再来刨根问底查查这个命名是否有规则,于是找到: 文件夹(sub-directry)名称,以前是不允许带空白的,后来允许带 ...
- wordpaster更新说明
官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/wordpaster/index.aspx 在线演示:FCKEditor2x示例 ...
- tornado+bootstrap急速搭建你自己的网站
bootstrap既然是这么的流行又能省很多的事为什么不用他呢?再加上牛X的produced by FB的tornado简直如虎添翼了! 1. 安装配置 安装所需要的库等内容.这里没什么需要多讲的.t ...
- （网络流 模板 Edmonds-Karp）Drainage Ditches --POJ --1273
链接: http://poj.org/problem?id=1273 Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total ...
- Codeforces777D Cloud of Hashtags 2017-05-04 18:06 67人阅读 评论(0) 收藏
D. Cloud of Hashtags time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- 2014年誓言：干掉网页设计程序——Dreamweaver！
2014年誓言:干掉网页设计程序——Dreamweaver! 阅读: 评论: 作者:Rybby 日期: 来源:rybby.com 2014年,我写下誓言,用自己设计的在线网页设计工具“拉拉变” ...
- JAVA 从头开始<四>
一.switch 1.根据输入月份获取季节 import java.util.*; class Demo8{ public static void main(String[] args) { Syst ...
- AJPFX的资金安全性
AJPFX承诺保证客户资金安全,并严格按照英国的相关规章制度从事经营活动.客户资金存放于投资级银行的独立账户中.通过实行公司资产与客户资金分别保管,在发生无偿债能力的罕见情况下,客户可获退还独立存放资 ...