.shop{
position: fixed;
top: 300px;
left: 40px;
}
.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;
}
.cart{
position: fixed;
bottom: 22px;
left: 32px;
width: 30px;
height: 30px;
background-color: rgb(0,160,220);
color: rgb(255,255,255);
}
 <div id="app">
<ul class="shop">
<li v-for="item in items">
<span>{{item.text}}</span>
<span>{{item.price}}</span>
<button @click="additem">添加</button>
</li>
</ul>
<div class="cart" style="">{{count}}</div>
<div class="ball-container"><!--小球-->
<div v-for="ball in balls">
<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
<div class="ball" v-show="ball.show">
<div class="inner inner-hook"></div>
</div>
</transition>
</div>
</div>
</div>
 <script>
new Vue({
el:"#app",
data:{
count: 0,
items:[
{
text: "苹果",
price: 15
},
{
text: "香蕉",
price: 15
}
],
balls: [ //小球 设为3个
{
show: false
},
{
show: false
},
{
show: false
},
],
dropBalls:[],
},
methods:{
additem(event){
this.drop(event.target);
this.count ++;
},
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); //获取y
el.style.display = '';
el.style.webkitTransform = 'translateY('+y+'px)'; //translateY
el.style.transform = 'translateY('+y+'px)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translateX('+x+'px)';
inner.style.transform = 'translateX('+x+'px)';
}
}
},
dropping(el, done) { /*重置小球数量 样式重置*/
let rf = el.offsetHeight;
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();
if (ball) {
ball.show=false;
el.style.display = 'none';
}
}
}
})
</script>

transtion属性可以查看官方文档,具体位置可以通过调试获得。

Vue实现购物小球抛物线的更多相关文章

  1. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. vue实现购物清单列表添加删除

    vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...

  3. vue 2.0 购物车小球抛物线

    备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <trans ...

  4. Vue项目实战之改动饿了吗购物小球动画

    html:没有写v-on: afterEnter函数了,因为执行不到,原因是enter的done: <div class="ball-container"><tr ...

  5. Vue实现购物车小球动画

    思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...

  6. Django+Vue打造购物网站(十)

    首页.商品数量.缓存和限速功能开发 将环境切换为本地,vue也切换为本地 轮播图 goods/serializers.py class BannerSerializer(serializers.Mod ...

  7. Django+Vue打造购物网站(八)

    购物车.订单管理和远程调试 添加商品到购物车 trade/serializers.py from rest_framework import serializers from goods.models ...

  8. Django+Vue打造购物网站(九)

    支付宝沙箱环境配置 https://openhome.alipay.com/platform/appDaily.htm?tab=info 使用支付宝账号进行登陆 RSA私钥及公钥生成 https:// ...

  9. Django+Vue打造购物网站(五)

    注册和登陆 drf的认证 http://www.django-rest-framework.org/api-guide/authentication/ settings.py文件的配置 INSTALL ...

随机推荐

  1. 你所需要的sql数据库资料

     sql语法的特点  1.没有"",所有的字符串都使用''包含  2.它的逻辑相等与赋值运算符一样都是= 如 if 1=1  3.不区别大小写,但是习惯函数上使用大写.所有与数据库 ...

  2. [linux] C语言Linux系统编程进程基本概念

    1.如果说文件是unix系统最重要的抽象概念,那么进程仅次于文件.进程是执行中的目标代码:活动的.生存的.运行的程序. 除了目标代码进程还包含数据.资源.状态以及虚拟化的计算机. 2.进程体系: 每一 ...

  3. 四:SpringCloud-Hystrix

    八:Hystrix断路器 1. 概述 1.1 分布式系统面临的问题 ==复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败.== 上图中的请求需要调用A, P, H ...

  4. Hunger Snake3

  5. VS2012 常用配置

    一. 整合svn版本控制 1. 点击此 下载与SVN版本相对应的ankhsvn插件,本人用的是Subversion 1.8 2. 安装ankhsvn插件,打开VS2012,右键任一工程,有显示如下图, ...

  6. UOJ#347. 【WC2018】通道(边分治)

    传送门 就是求两个点 \(a,b\) 使得 \(dis_1(a,b)+dis_2(a,b)+dis_3(a,b)\) 最大 step1 对第一棵树边分治 那么变成 \(d_1(a)+d_1(b)+di ...

  7. Python之面向对象继承复习

    总结:self是谁就从谁开始寻找

  8. Node.js 学习笔记(一)--------- Node.js的认识和Linux部署

    Node.js 一.Node.js 简介  简单的说 Node.js 就是运行在服务端的可以解析并运行 JavaScript 脚本的软件. Node.js 是一个基于Chrome JavaScript ...

  9. 【Angularjs】ng-repeat中使用ng-model遇到的问题

    总结:在ng-repeat中ng-model的问题,原因是ng-model对controller中的$scope是不可见的,所以在使用repeat中的某个对象的属性的时候,最好还是将该对象或者该对象的 ...

  10. Unihan(统汉字)常用字段介绍

    0 背景 1 文件 1.1 IRG Sources 1.2 Dictionary Indices 1.3 Dictionary-like Data 1.4 Other Mappings 1.5 Rad ...