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
-
{{item.text}}
{{item.price}}
添加
{{count}}
javascript
new Vue({
el:"#app",
data:{
count: 0,
items:[{
text: "蘋果",
price: 15
}, {
text: "香蕉",
price: 15
}],
//小球 設為3個
balls: [ { show: false },
{ show: false },
{ show: false }, ],
dropBalls:[],
},
methods:{
additem(event){
this.drop(event.target);
this.count ++;
},
drop(el){ //抛物
for(let i=0;i
let ball= this.balls[i];
if(!ball.show){
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';
}
}
}
})