摘要:第个问题购物车小球做抛物线运动。首先,落点都在购物车,小球则是随机的。其次,抛物线运动,只有在这段期间有,在期间是没有的,因此,需要用提供的钩子函数。获取号位置小球是子组件。直接使用事件总线。
备注:此项目模仿 饿了吗。我用的是最新的Vue, 视频上的一些写法已经被废弃了。
布局代码
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次点击的地方做过度效果。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107125.html
摘要:前言这是我第一个基于的项目作品,目的很简单,学以致用,将之前的前端知识积累加上目前流行的前端框架,以项目的形式展现出来。即将属性和请求返回数据对象合并到空对象,然后赋值给这里加上即提供了一种可扩展的机制,倘若原来的属性中有预定义的其他属性。 前言 这是我第一个基于 Vue 的项目作品,目的很简单,学以致用,将之前的前端知识积累加上目前流行的前端框架,以项目的形式展现出来。 源代码:ht...
摘要:陈家宾在做小程序的项目中,需要在添加购物车的时候,增加抛物线小球动画。 author: 陈家宾 email: 617822642@qq.com date: 2018/2/24 在做小程序的项目中,需要在添加购物车的时候,增加抛物线小球动画。 先给大家看下效果图(其实已经是实现后的效果了,顺便给自己公司打广告了哈哈) showImg(https://segmentfault.com/im...
摘要:上图即为归零后的坐标系,对称轴直线为在抛物线方程中,值得正负代表着抛物线的开口方向,那么值的绝对值也和抛物线的开口大小有着反比例的关系。 废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理 很简单的一个小特效,接下来来说一下他的原理。 显而易见,这小东西肯定和抛物...
摘要:上图即为归零后的坐标系,对称轴直线为在抛物线方程中,值得正负代表着抛物线的开口方向,那么值的绝对值也和抛物线的开口大小有着反比例的关系。 废话不多说,先上DEMO~http://jsrun.net/PxKKp?uid=483再上源码~https://github.com/Nelson2016... 运行的原理 很简单的一个小特效,接下来来说一下他的原理。 显而易见,这小东西肯定和抛物...
阅读 3229·2021-11-24 09:38
阅读 2127·2021-11-23 09:51
阅读 1710·2021-10-13 09:39
阅读 2529·2021-09-23 11:53
阅读 1344·2021-09-02 15:40
阅读 3618·2019-08-30 15:54
阅读 1090·2019-08-30 13:04
阅读 2514·2019-08-30 11:01