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 18 Vue.js
详解vue 组件注册
Nov 20 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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开发中的页面跳转方法总结
2015/04/26 PHP
PHP生成树的方法
2015/07/28 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
json简单介绍
2008/06/10 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
js中document.write的那点事
2014/12/12 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
python多线程扫描端口示例
2014/01/16 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
用C++封装MySQL的API的教程
2015/05/06 Python
用Python抢过年的火车票附源码
2015/12/07 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python读取Excel表格文件的方法
2019/09/02 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
保险公司早会主持词
2014/03/22 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
关于车尾的标语大全
2015/08/11 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android