使用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,这样可以动态设置样 ...
随机推荐
- Java多线程-并发协作(生产者消费者模型)
对于多线程程序来说,不管任何编程语言,生产者和消费者模型都是最经典的.就像学习每一门编程语言一样,Hello World!都是最经典的例子. 实际上,准确说应该是“生产者-消费者-仓储”模型,离开了仓 ...
- 201709012工作日记--一台电脑创建两个Github账户上传代码
1. 在一台主机上面使用多个GitHub账号 有时候,我们需要将个人账号和公司账号区分,这时候我们就会需要在一台电脑上使用2个不同的git账号. 2. 上传文件 http://blog.csdn.ne ...
- POJ3273 Monthly Expense 2017-05-11 18:02 30人阅读 评论(0) 收藏
Monthly Expense Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 25959 Accepted: 10021 ...
- UFOV页面 使用canvas
canvas画八边形:cxt.beginPath();cxt.beginPath(); canvas内线条的粗细:cxt.lineWidth = '2'; 鼠标消失: css: html, body ...
- java web开发过程中的“\”指的是什么，如何区分
- Android-ActionBar-与Menu结合
ActionBar就是一个标题栏,以前Android3.0之前还称为标题栏,Android3.0之后取名为ActionBar 首先必须在AndroidManifest.xml中指定Applicatio ...
- 常见NoSQL的CAP归类
关注一致性和可用性的 (CA) 这些数据库对于分区容忍性方面比较不感冒,主要采用复制(Replication)这种方式来保证数据的安全性,常见的CA系统有:1. 传统关系型数据库,比如Postgres ...
- c# 字符串中某个词出现的次数及索引
字符串中某个词出现的次数主要是考察队字符串方法的使用: indexof(): 有9个重载,具体的请转到F12查看详细内容: 本文使用的是第6个重载: 如果找到该字符串,则为从零开始的索引位置:如果未找 ...
- ES6躬行记（22）——Promise
在JavaScript中,回调函数是处理异步编程的常用解决方案,但层层嵌套的回调金字塔(如下代码所示)一直受人诟病,因为不仅在视觉上更加混乱,而且在管理上也更为复杂. setTimeout(() =& ...
- Day 9 作业题（完成）
# 练习题# 1.整理函数相关知识点,画思维导图,写博客 # 2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者.'''def func1(argv): f ...