html中购物车小球飞入的效果,vue.js加入购物车小球动画

在购物车组件Cart.vue中，添加小球代码

{{selectcount}}

:class="{'pricebg':(selectcount > 0)}">￥{{totalPrice}}

另需配送费￥{{deliveryPrice}}元

{{payPrice}}

@before-enter="beforeDrop"

@enter="dropping"

@after-enter="afterDrop"

>

在export default中定义小球数据

data(){

return{

balls: [ //生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画

{

show: false //维护当前小球的状态

},

{

show: false

},

{

show: false

},

{

show: false

},

{

show: false

}

],

dropBalls: [], //dropBalls数组接收下落小球,用来存贮已经下落的小球

fold: true //购物车详情列表默认折叠

}

触发一次事件就会将所有小球进行遍历

drop(el) {

//el代表点击的添加商品按钮icon-add_circle,而不是小球

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.$set(ball,'el',el)

this.dropBalls.push(ball);

return; //在所有的小球中只要找到1个ball.show = true;就可以了，不用把所有的小球都有要有设置为true

}

}

},

//下面方法beforeDrop，dropping，afterDrop都是动画方法

beforeDrop(el) { //这个方法的执行是因为这是一个vue的监听事件,动画enter之前

//把使用到的小球从起始位置(购物车位置)上升到添加按钮位置

//在这时el与上面的drop(el)不是同一个el,这里的el代表的是类为ball的div及其子元素

let count = this.balls.length;

//先找到所有为true的小球(连续点击的情况)

while (count--) { //循环执行并判断

let ball = this.balls[count];

if (ball.show) { //下落的小球

//外层元素是纵向的动画，内层元素是横向的动画

//el.getBoundingClientRect()这个方法返回一个矩形对象，

// 包含四个属性：left、top、right和bottom。分别表示元素的左，上，右和下分别相对【浏览器视窗】的位置。

//ball.el与el不是同一个，ball.el是指点击添加按钮时的那个el

let rect = ball.el.getBoundingClientRect(); //获取小球的相对于视口的位移(小球高度)

console.log('rrr');

console.log(rect);

let x = rect.left - 32; //当前按钮和购物车中小球的left的差值

//window.innerHeight文档显示区域的宽高,y表示的是按钮到购物车的高度

let y = -(window.innerHeight - rect.top - 22); //负数,因为是从左上角往下的的方向【】

el.style.display = '';

//el的动画偏移

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, done) { //动画enter进入

//rf是为了触发浏览器的重排

//*添加、删除、更新DOM节点

// *通过display: none隐藏一个DOM节点-触发重排和重绘

// *通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化

// *移动或者给页面中的DOM节点添加动画

// *添加一个样式表，调整样式属性

//*用户行为，例如调整窗口大小，改变字号，或者滚动。

//*获取某些元素的属性(我使用的方法)

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.style.webkitTransform = 'translate3d(0,0,0)';

inner.style.transform = 'translate3d(0,0,0)';

el.addEventListener('transitionend', done);

});

},

afterDrop(el) { //动画进入之后

let ball = this.dropBalls.shift();//完成一次动画就删除一个dropBalls的小球

if (ball) {

ball.show = false;

el.style.display = 'none'; //隐藏小球

}

},

样式：

.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: rgb(0, 160, 220)

transition: all 0.4s linear

在向添加商品组件中Cartcontrol.vue中，向父组件Goods.vu组件中传递参数

//添加购物车商品数量

addCart(ele){

if(!ele._constructed){

//better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个

// 属性区别_constructed，pc端浏览器的点击事件的event中是没有这个属性的

return;

}

//一开始food中是没有商品数量count

if(!this.food.count){

// this.food.count = 1;count不是food对象中的属性，直接向food添加新属性count，

// 当count值发生变化的时候在dom渲染的时候是无法感应到count的变化

this.$set(this.food,'count',1);

}else{

this.food.count++;

}

//向父组件Goods传参

this.$emit('add',ele.target);

},

父组件Goods.vu在接受到子组件的添加商品的信号后

@add="addFood"

>

:deliveryPrice="seller.deliveryPrice"

:minPrice="seller.minPrice"

:selectFoods="selectFoods"

ref="shopcart"

>

addFood(target){

this._drop(target);

},

_drop(target) {

// 体验优化,异步执行下落动画

this.$nextTick(() => {

//target代表点击的添加商品按钮icon-add_circle

this.$refs.shopcart.drop(target); //访问到$refs.shopcart组件中的方法drop

});

}