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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue postcss-px2rem 自适应布局
May 15 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中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
js调用flash的效果代码
2008/04/26 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
Angular异步变同步处理方法
2018/08/13 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
JS实现图片切换效果
2018/11/17 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
数控技术应届生求职信
2013/11/13 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
工作求职信
2014/07/04 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
老乡聚会通知
2015/04/23 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL