我看別人的文章為什麼實現小球的拋物線效果需要用兩層元素,進行兩個動畫,而不可以只寫一個元素<p class="ball"></p>?然後用transform進行x,y軸的修改,我發現這樣寫沒效果?但是為什麼啊?
這是別人的程式碼
#這是我的程式碼
beforeDrop(el){
//把使用到的小球从起始位置(购物车位置)上升到添加按钮位置
let count=this.balls.length;
while(count--){
let ball=this.balls[count];
if(ball.show){
let rect=ball.el.getBoundingClientRect();
let y=-(window.innerHeight-rect.top-25)
let x=rect-rect.left-32
el.style.webkitTransform=`translate3d(${x}px,${y}px,0)`;
el.style.transform=`translate3d(${x}px,${y}px,0)`;
el.style.display="";
}
}
},
dropping(el,done){
let height=el.offsetHeight//触发重绘
this.$nextTick(()=>{
el.style.webkitTransform='translate3d(0,0,0)';
el.style.transform='translate3d(0,0,0)';
el.addEventListener('transitionend', done); //Vue为了知道过渡的完成,必须设置相应的事件监听器。
})
},
afterDrop(el){
let ball=this.dropballs.shift();
if(ball){
ball.show=false;
el.style.display="none"
}
},
css:
.ball-container{
.ball{
position: fixed;
z-index: 50;
width: 12px;
height: 12px;
left:32px;
bottom:25px;
background: rgb(0, 160, 220);
border-radius: 50%;
transition:3.6s all cubic-bezier(0.49, -0.29, 0.75, 0.41)
}
}
文章地址
/a/11...
第一眼發現個問題
你這裡只回前半段呢,整個是字串才對
transition:0.6s all cubic-bezier(0.49, -0.29, 0.75, 0.41)其中cubic-bezier是運動速率,所以只寫一個就會變成斜線動畫,而不會有拋物線效果,兩個元素其實相當於對速度進行分解