关键词:
http://www.cnblogs.com/yuxingyoucan/p/7063881.html
-
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画
-
动画的内容分别是外层和内层,外层控制动画小球的轨道和方向,内层控制动画小球的运行状态
-
动画使用vue的js钩子实现
-
因为小球动画只有一个方向(只执行单方向从上到下滚落),所以只用了before-enter,enter,after-enter
-
用v-show控制小球的可见性,在动画执行期间可见,其余时候隐藏
-
<div class="ball-container"> <transition name="fade" v-for="ball in balls" :key="ball" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="ball.show"> <div class="inner inner-hook"></div> </div> </transition> </div>
-
-
设置了balls数组来代表五个小球
-
设置了dropBalls数组正在运行的小球
-
data(){ return { balls: [ { show: false }, { show: false }, { show: false }, { show: false }, { show: false } ], dropBalls:[] } },
-
-
-
只要触发了drop事件,不止是drop事件里面的代码会执行,另外几个vue的js监听钩子也会一起按顺序执行
-
触发了drop事件
-
beforeEnter开始执行
-
enter开始执行
-
afterEnter开始执行
-
-
drop事件的触发可以通过点击cartcontrol组件的添加小球按钮addCart事件触发使用
$emit
,也可以父组件this.$refs.shopcart.drop(target);
直接触发-
这么做的目的是实现,在子组件cartcontrol点击之后,可以将该dom传给父组件goods然后再传给子组件shopcart,(因为目前他们之间的通道就是这样,shopcart子组件并没有导入cartcontrol子组件,所以没有直接通讯)这样就实现了多个组件之间的通讯,从而可以实现需求,例如这里就是实现点击子组件cartcontrol后添加一个动画,将小球滑落到另外一个组件shopcart
-
-
$emit是触发当前实例上的事件。附加参数都会传给监听器回调。
-
-
methods: { drop(el) { //触发一次事件就会将所有小球进行遍历 for (let i = 0; i < this.balls.length; i++) { let ball = this.balls[i]; if (!ball.show) { //将false的小球放到dropBalls ball.show = true; ball.el = el; //设置小球的el属性为一个dom对象 this.dropBalls.push(ball); return; } } }, beforeEnter(el){ //这个方法的执行是因为这是一个vue的监听事件 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.display = ''; //清空display el.style.webkitTransform = `translate3d(0,${y}px,0)`; el.style.transform = `translate3d(0,${y}px,0)`; //处理内层动画 let inner = el.getElementsByClassName('inner-hook')[0]; //使用inner-hook类来单纯被js操作 inner.style.webkitTransform = `translate3d(${x}px,0,0)`; inner.style.transform = `translate3d(${x}px,0,0)`; } } }, enter(el, done) { //这个方法的执行是因为这是一个vue的监听事件 /* eslint-disable no-unused-vars */ let rf = el.offsetHeight; //触发重绘html this.$nextTick(() => { //让动画效果异步执行,提高性能 el.style.webkitTransform = 'translate3d(0,0,0)'; el.style.transform = 'translate3d(0,0,0)'; //处理内层动画 let inner = el.getElementsByClassName('inner-hook')[0]; //使用inner-hook类来单纯被js操作 inner.style.webkitTransform = 'translate3d(0,0,0)'; inner.style.transform = 'translate3d(0,0,0)'; el.addEventListener('transitionend', done); //Vue为了知道过渡的完成,必须设置相应的事件监听器。 }); }, afterEnter(el) { //这个方法的执行是因为这是一个vue的监听事件 let ball = this.dropBalls.shift(); //完成一次动画就删除一个dropBalls的小球 if (ball) { ball.show = false; el.style.display = 'none'; //隐藏小球 } } }
-
关于drop方法,是实现每一个ball的show属性和el属性处理,并且点击一次会自动将一个小球放到dropBalls数组里面,放到里面就代表的是一个小球已经被开始执行动画,但是由于动画是异步的,所以先主动设置.
-
关于getBoundingClientRect(位移的计算是从左上角开始)
-
使用getBoundingClientRect获取到当前元素的坐标,然后需要位移的left减去元素的宽获取真正的最终位移x坐标
-
使用getBoundingClientRect获取到当前元素的坐标,然后需要当前屏幕的高度减去元素的top再减去元素本身的高度获取到真正的最终位移y坐标,并且这个是负数,因为是从左上角往下的方向
-
-
关于html重绘
-
因为浏览器对于重绘是有要求并且是有队列完成的,这是主要为了性能,虽然动画隐藏了小球
display none
,但没有触发html重绘,或者说没有立即触发html重绘,所以需要手动 -
let rf = el.offsetHeight;
这是一个手动触发html重绘的方法 -
网页性能管理详解 http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
-
高性能JavaScript 重排与重绘http://www.cnblogs.com/zichi/p/4720000.html
-
.ball-container .ball position fixed left: 32px bottom: 22px z-index:200 transition: all .6s cubic-bezier(0.49, -0.29, 0.75, 0.41) .inner width 16px height 16px border-radius 50% background rgb(0,160,220) transition: all .6s linear
关于cubic-bezier(0.49, -0.29, 0.75, 0.41)
,是动画抛物曲线(贝塞尔曲线)的配置,基于css3实现,http://cubic-bezier.com/#.17,.67,.83,.67,参考贝塞尔曲线与CSS3动画、SVG和canvas的基情 ,至于抛物线放在外层就是为了控制内层的元素的轨道和方向的.
vue动画动画生命周期函数
...开 第三种动画: 半场动画(比如我们常见的加入购物车功能: 每次点加入购物车都会有一个小球飞到购物车里,然后就没有了,没有说又跑出来 查看详情
添加购物车之小球半场动画的实现
问题:不同分辨率下小球移动至购物车徽标解决:不能把位置横纵坐标写死,根据不同情况动态计算这个坐标值先得到徽标的横纵坐标再得到小球的横纵坐标,然后横坐标值求差,纵坐标值求差,结果就是要移动的距离Vue中不推... 查看详情
css贝塞尔曲线模仿饿了么购物车小球动画
在线观看贝塞尔曲线值:传送门在线观看动画效果:传送门代码:<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JSBin</title><style> 查看详情
vue中的半程动画
...需求只需要又开始的动画,不需要有结束的动画时(加入购物车时,有一个小球慧聪商品按钮区域,运动到购物车图标上,并不会返回回去),他们两个不会满足需求此时vue为我们提供了JavaScript钩子可以满足需求<transitionv-on:b... 查看详情
加入购物车的动画效果
使用过蘑菇街的用户基本上都知道有一个加入购物车的动画效果,此处不具体描述想知道的可以去下载体验一下。1、思路 目前想到两种方式实现这种效果,一是使用Tween动画,直截了当的进行一个移动,蘑菇街就是使用... 查看详情
点击加入购物车动画
HTML <divclass="fly-cart"> <divclass="wrapper"> <span><iclass="shopping-cart"></i></span> <divclass="clear"></d 查看详情
制作加入购物车动画效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><scriptsrc="js/jquery-2.1.4.min.js"></script><style>*{padding:0px;margin:0p 查看详情
js加入购物车抛物线动画
天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛... 查看详情
jquery物品加入购物车动画效果
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><titl 查看详情
仿饿了么加入购物车旋转控件-自带闪转腾挪动画的按钮
转载请标明出处:http://blog.csdn.net/zxt0601/article/details/54235736本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)代码传送门:喜欢的话,随手点个star。多谢https://github.com/mcxtzhang/AnimShopButton概述在上文,酷炫Path动画已经预告了,今... 查看详情
通用购物车抛物线动画
说明: 之前用vuecss3写过抛物线动画,但是小程序中,不支持js操作dom元素,所以你无法用js去去除动画的css3,导致你无法进行第二次的动画。所以,只能用纯js去计算运动的路线,再改变小球的位置,这个写法,估计是没有什... 查看详情
【css动画】饿了么加入购物车抛物线动画实现
...肥宅,手动滑稽),或者在淘宝购物的时候,将商品加入购物车时会有一个很炫酷的动画,如下图饿了么点餐动画:所以百度了一下前端使用css实现这个效果,然后就自己就照葫芦画瓢的写了一个小小的demo,完全当作学习了一... 查看详情
饿了么购物车动画(代码片段)
前言之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画,所以想看看别人是怎么实现的,但是看了很多仿饿了么的demo都是实现了一个完整的大的项目,要找到那个小模块很麻烦,所以自己将联动菜单和动画提取出来... 查看详情
vue实现购物车界面(代码片段)
以下是一个用Vue.js实现购物车的简单示例:在Vue组件中定义购物车数据:data()returncart:[],total:0在商品列表或详情页中添加“加入购物车”按钮,并绑定添加购物车方法:<button@click="addToCart(product)">加入购物车</button>实现a... 查看详情
第十六节jquery使用offset制作加入购物车动画(代码片段)
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title>Document</title>6<scripttype="text/javascript"src="../jquery-1.12.4.min.js"></script>7<scripttype="text/javascript">8$(function()9var$btn=$(‘#btn‘);10var$chart=$(‘.chart‘... 查看详情
vue.js实例:开发购物车
使用计算属性,内置指令,方法等基础知识开发购物车。需求分析:展示一个已经加入购物车的商品列表,包含商品名称、商品单价、购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商... 查看详情
vue.js实例:开发购物车
使用计算属性,内置指令,方法等基础知识开发购物车。需求分析:展示一个已经加入购物车的商品列表,包含商品名称、商品单价、购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商... 查看详情
jquery-实现加入购物车效果(代码片段)
...获取鼠标手机位置、创建dom以及删除dom等方法,实现加入购物车,即点击当前物品滑入购物车一、案例效果图如下所示:二、具体实现代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">&l 查看详情