javascript - pourquoi deux éléments sont nécessaires pour créer un effet de défilement avec transformation
J'ai lu les articles d'autres personnes expliquant pourquoi il est nécessaire d'utiliser deux couches d'éléments pour effectuer deux animations afin d'obtenir l'effet parabolique d'une petite boule, au lieu d'écrire simplement un élément<p class="ball"></p> ? Alors utilisez transformer Modifier les axes x et y. J'ai trouvé qu'écrire comme ça n'a aucun effet ? Mais pourquoi?
C'est le code de quelqu'un d'autre
Voici mon code
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)
}
}
Adresse de l'article
/a/11...
