使用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,这样可以动态设置样 ...
随机推荐
- 函数作用域和块级作用域--你不知道的JavaScript
et和const在{}内声明都会变为外部不能访问的值,但是const声明的是常量,也不能修改 函数是 JavaScript 中最常见的作用域单元.本质上,声明在一个函数内部的变量或函数会在所处的作用域 ...
- js之create()
语法: Object.create(proto, [propertiesObject]) 返回一个新的对象的指针 proto:对象会被作为新创建的对象的原型 [propertiesObject]:对象 ...
- POJ3273 Monthly Expense 2017-05-11 18:02 30人阅读 评论(0) 收藏
Monthly Expense Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 25959 Accepted: 10021 ...
- wxpython 图像编程
转: http://wxhowto.googlecode.com/svn-history/r6/trunk/body/ch10.tex 的 HTML 档. 使用图像编程 这一章来了解一下我们可以使用图 ...
- Django开发Web监控工具-pyDash
今天发现了一个比较有意思的监控工具,是基于Django开发的,开发大牛已经开放了源代码,向大牛致敬,同时研究研究,目前感觉这个监控比较直观,可以针对个人服务器使用,同时涉及的环境比较简单,部署起来 ...
- Sublime Text 3 格式化HTML CSS JS 代码
一,首先通过ctrl+shift+p 要等一会就会出现插件安装界面 二,在插件安装输入框,输入:HTML-CSS-JS Prettify 并安装该插件 三,如果没有装nodejs, 下载nodejs ...
- mysql免安装版 安装配置 （转）
1. 下载MySQL Community Server 5.6.13 2. 解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录下,我的解压目录是: "D:\Pr ...
- [ACM_数据结构] HDU 1166 敌兵布阵 线段树 或 树状数组
#include<iostream> #include<cstdio> #include<memory.h> using namespace std; ]; //- ...
- LeetCode139：Word Break
题目: Given a string s and a dictionary of words dict, determine if s can be segmented into a space-se ...
- CSS3 & 页面布局
相关链接 视频链接: CSS3 & 页面布局 CSS3与页面布局学习总结(一) CSS3与页面布局学习总结(二) CSS3与页面布局学习总结(三) CSS3与页面布局学习总结(四) CSS3与 ...