java 小球抛物线_vue 2.0 购物车小球抛物线
备注:此项目模仿 饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。
布局代码
v-for="ball in balls"
@before-enter="beforeDrop"
@enter="dropping"
@after-enter="afterDrop">
css代码(使用stylus写法)
.ball-container
.ball
position fixed
left 32px
bottom 22px
z-index 200
transition all 0.4s cubic-bezier(0.49,-0.29,0.75,0.41)
.inner
width 16px
height 16px
border-radius 50%
background-color rgb(0,160,220)
transition all 0.4s linear
js代码
data() {
return {
balls : [
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
},
{
show: false
}
],
dropBalls: []
};
},
methods: {
drop(el) {
for(let i = 0; i < this.balls.length; i++) {
let ball = this.balls[i];
if(!ball.show) {
ball.show = true;
ball.el = el;
this.dropBalls.push(ball);
return ;
}
}
}
beforeDrop(el) {
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if(ball.show) {
let rect = ball.el.getBoundingClientRect();
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
dropping(el) {
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight;
this.$nextTick(() => {
el.style.webkitTransform = 'translate3d(0,0,0)';
el.style.transform = 'translate3d(0,0,0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0,0,0)';
inner.style.transform = 'translate3d(0,0,0)';
});
},
afterDrop(el){
let ball = this.dropBalls.shift();
if(ball) {
ball.show = false;
el.style.display = 'none';
}
}
}
getBoundingClientRect()。方法请阅读这篇文章
https://www.cnblogs.com/limei...
说明:
goods 是一个组件,里面包含menu(div) , foods(div), shopcart(购物车组件)。其中foods 包含cartcontrol(即小球组件)
组件之间的通信:
说明:菜单和商品
第1个问题:小球,需要获取所点击的商品的数量。
利用Vue的props,将foods值传递给cartcontrol。但是这样有个问题。即子组件更新,无法同步回父组件。且,在子组件中,对food注册了一个count属性,此属性也无法同步回父组件(goods)。
解决方法:
导入全局的Vue。
利用Vue.set(target,key,value); 对 target注册count;
第2个问题:小球点击,将所点击过的商品数目传递给 shopcart。
在goods的 computed:{} 定义一个方法,将该方法以props的方式,传递给shopcart。
因为,shopcart,对传递过去的数据仅数据运算(不会改变)。因此不用同步会父组件。
第3个问题:购物车小球做抛物线运动。
对于购物车小球做抛物线运动。首先,落点都在购物车,小球则是随机的。要做抛物线运动,就要获取,所点击的 + 号的x,y位置。其次,抛物线运动,只有在enter--> enter-to这段期间有,在leave--> leave-to 期间是没有的,因此,需要用Vue提供的钩子函数。
获取 + 号x,y 位置:
小球(cartcontrol)是子组件。需要把数据传递给 goods(父组件)。可以使用Vuex,或者直接使用事件总线。对于饿了吗demo。直接使用事件总线。
创建一个 空的Vue。在 cartcontrol 中 ,通过 Bus.$emit(key, ... arg); 注册一个监听,然后再父组件 通过Bus.$on(key, function(... arg));监听此方法。将所操作的 dom 对象传递过去即可
Vue提供的钩子
这里要说明一点,Vue在他的官网,对于只有过度的js,done是必须的,当我加上done的时候,after-enter方法无法被执行。
还有1个问题,Vue官网推荐,只有过度效果,在做过度动画的元素上加上v-bind:class='false'。之前没加,出现了,小球只能在第1次点击的地方做过度效果。
java 小球抛物线_vue 2.0 购物车小球抛物线相关推荐
- html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
- android落下动画,Android应用开发android 购物车小球掉落动画
本文将带你了解Android应用开发android 购物车小球掉落动画,希望本文对大家学Android有所帮助. 先贴效果图 对自定义View小红球的绘制 public class BallView ...
- (前端学习)07 使用vue框架制作购物车小球动画效果
最近在学习前端制作了一个购物车小球的动画效果 直接上图看看效果 下面介绍一下制作这个动画的详细过程: 1.因为使用vue所以需要使用transition标签包裹 并指定动画三个动画生命周期函数 < ...
- java实现抛物线轨迹计算_控件抛物线轨迹的实现
写这篇文章的初衷也是加强对插值器和估值器的记忆. 其实对于插值器和估值器来说,除了系统提供的以外,我们可以自定义.实现方式也很简单.因为插值器和估值器都只是一个接口.并且内部只有一个方法.我们只要实现 ...
- java this$0_java中this$0的含义及用法
java中this$0的含义及用法 (2012-01-19 22:43:33) 标签: 杂谈 java中this$0的含义及用法,具体case是这样的: 通过测试工具去探测界面UI上的控件FlatBu ...
- 【android】java.net.ConnectException: localhost/127.0.0.1:8080 - Connection refused
调试中通过android simulator模拟器链接localhost或者127.0.0.1,因为我在电脑上面建立了apache,我的代码大概就是 URL url = new URL(urlStri ...
- c语言 java 性能 测试_这个蓝桥杯系统的题,用c语言去评测是满分,改为Java说运行错误是0分,但是我查看输入输出,至少第...
这个蓝桥杯系统的题,用c语言去评测是满分,改为Java说运行错误是0分,但是我查看输入输出,至少第一个是对的啊提交序号1269960作者彭云成提交时间02-0507:49:27评测结果运行错误得分.. ...
- JUnit:使用Java 8和AssertJ 3.0.0测试异常
Java 8的AssertJ 3.0.0发行版比以前更容易测试异常. 在我以前的一篇博客文章中,我描述了如何利用纯 Java 8实现此目的,但是使用AssertJ 3.0.0可能会删除我创建的许多代码 ...
- Java EE 7 / JAX-RS 2.0:具有自定义HTTP标头的简单REST API身份验证和授权
在使用已可用的HTTP协议实施Web服务时,REST带来了很多便利. 通过仅通过指定的URL触发GET,POST和其他HTTP方法,您将确保通过REST服务的响应来完成某些工作. 但是,无论REST给 ...
最新文章
- PyTorch 图像分类
- badatatable转成json_C# DataTable 转换成JSON数据 三种方法
- matlab mbuild setup,关于mbuild的一个问题
- java return this
- SpringBoot高级消-息-RabbitMQ基本概念简介
- [Visual Studio+TFS--强大的项目管理工具]
- vue组件之间8种组件通信方式总结
- Objective-C 语法快速参考(附:Learning_Objective-C_A_Primer_中文版)
- 有了这组新年元旦海报PSD模板素材,不愁晚交稿!
- PyTorch搭建简单神经网络实现回归和分类
- scrum 12.8
- 用python分析拼多多_python:拼多多订单接口api
- SQL Server用户权限详解
- 利用Aspose.PDF for .NET实现pdf转word
- 微信小程序: 摇色子
- 攻防世界 Web高手进阶区 mfw
- 单片机课程设计---篮球记分牌
- php 5.4 opcode,PHP Opcode缓存总结
- tree--树,最常见的复杂关系结构
- 蓝牙认证测试调试记录