用vue怎样做添加购物车有抛物线显示的效果？

发布时间：2022-11-14 11:12:32 所属栏目：语言来源：

导读：　　经常浏览购物网站的朋友可能会看到这样的一个效果，就是添加商品到购物车的时候，会有抛物线这样的效果，那么这个具体是怎样做呢？接下来小编就带大家来了解一下。
　　
　　css片段
　　
　　 .shop{
　　

经常浏览购物网站的朋友可能会看到这样的一个效果，就是添加商品到购物车的时候，会有抛物线这样的效果，那么这个具体是怎样做呢？接下来小编就带大家来了解一下。
　　
　　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" >{{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>

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

深度优先生成树和广度	Java截取新闻标题
Python pass语句及其用	C++类的定义和对象的建

用vue怎样做添加购 物车有抛物线显示的效果？

用vue怎样做添加购物车有抛物线显示的效果？