文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue怎么实现购物小球抛物线

2024-04-02 19:55

关注

本文小编为大家详细介绍“Vue怎么实现购物小球抛物线”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么实现购物小球抛物线”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

Vue实现购物小球抛物线的方法实例,

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>

 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);

 }

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> 

读到这里,这篇“Vue怎么实现购物小球抛物线”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯