使用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,这样可以动态设置样 ...
随机推荐
- myeclipse新建jsp文件时弹出默认模板,怎么改成自己修改后的
(1)打开Window——Preferences (2)选择MyEclipse——Filed andEditors——JSP——JSP Source——Templates 看到右边的New Jsp编辑 ...
- python编码（三）
python 有str object 和 unicode object 两种字符串,都可以存放字符的字节编码,但是他们是不同的type,这一点很重要,也是为什么会有encode(编码)和decode( ...
- BSD Socket 通信
Berkeley sockets is an application programming interface (API) for Internet sockets and Unix domain ...
- linux 各项配置汇总
DNS配置 linux动态地址无需配置DNSlinux配置静态地址时,需要重新设置DNS,DNS的地址为:自己所用网络商的DNS地址,其中DNS地址还分区域例如:电信 江苏南京dns:218.2.13 ...
- PAT甲 1012. The Best Rank (25) 2016-09-09 23:09 28人阅读 评论(0) 收藏
1012. The Best Rank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To eval ...
- 配置好Nginx后，通过flume收集日志到hdfs（记得生成本地log时，不要生成一个文件，）
生成本地log最好生成多个文件放在一个文件夹里,特别多的时候一个小时一个文件 配置好Nginx后,通过flume收集日志到hdfs 可参考flume的文件 用flume的案例二 执行的注意点 avro ...
- 使用Java web工程建立Maven Web Module工程
1. 前言 之前有一篇关于搭建S2SH的文章中提到建立Maven Web Module工程,有人反馈说这个方面不会.那还是唠叨一下,写篇文章说明一下吧. 建立Maven Web Module的方式有多 ...
- 【转】WPF中PasswordBox控件的Password属性的数据绑定
英文原文:http://www.wpftutorial.net/PasswordBox.html 中文原文:http://blog.csdn.net/oyi319/article/details/65 ...
- IDEA13 项目配置
之前用了一段时间的idea,有些老的代码,用eclipse跑了一下,比较麻烦,于是试用一下idea,最后,项目可以顺利跑起来. 对项目的配置,主要是在F4中,即:Module Setting,在模块的 ...
- 一起学习MVC（4）Controllers的学习
控制器Controllers Controllers为控制器文档,AccountControllers内的方法对应View→Account下的cshtml文件. 我们看到Aco ...