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项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue使用watch监听属性变化
Apr 30 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计算当前程序执行时间示例
2014/04/24 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python批量提交沙箱问题实例
2014/10/08 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python 实现矩阵按对角线打印
2019/11/29 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python魔术方法专题
2020/06/19 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
信用社员工先进事迹材料
2014/02/04 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
ktv筹备计划书
2014/05/03 职场文书
医学生求职自荐书
2014/06/12 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL