Vue实现购物小球抛物线的方法实例


Posted in Vue.js onNovember 22, 2020

本文介绍的是利用Vue实现购物小球抛物线的相关内容,下面话不多说了,来一起看看详细的介绍吧

css片段

.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);
 }

html片段

<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>

js片段

<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实现购物小球抛物线的文章就介绍到这了,更多相关Vue购物小球抛物线内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
详解vue 组件注册
Nov 20 Vue.js
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 #Vue.js
深入了解Vue3模板编译原理
Nov 19 #Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 #Vue.js
You might like
咖啡界又出新概念,无需咖啡豆的分子咖啡
2021/03/03 咖啡文化
WINXP下apache+php4+mysql
2006/11/25 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
对联广告js flash激活
2006/10/19 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
jquery animate动画持续运动的实例
2017/11/29 jQuery
react-native android状态栏的实现
2018/06/15 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
Python堆排序原理与实现方法详解
2018/05/11 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
python判断变量是否为列表的方法
2020/09/17 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
课程设计心得体会
2013/12/28 职场文书
财务部经理岗位职责
2014/02/03 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
神龙架导游词
2015/02/11 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL