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下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
详解javascript遍历方式
2015/11/11 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
如何基于Python批量下载音乐
2019/11/11 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
教师实习期自我鉴定
2013/10/06 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
西门豹教学反思
2014/02/04 职场文书
企业内控岗位的职责
2014/02/07 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
新学期开学寄语2016
2015/12/04 职场文书