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 26 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 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
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python制作最美应用的爬虫
2015/10/28 Python
python开发之list操作实例分析
2016/02/22 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
学Python 3的理由和必要性
2019/11/19 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
python matplotlib库的基本使用
2020/09/23 Python
大学生村官工作感言
2014/01/10 职场文书
前台文员职责范本
2014/03/07 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
《穷人》教学反思
2016/02/19 职场文书
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js