溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“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怎么實現購物小球拋物線”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
