This article introduces the relevant content of using Vue to realize the parabola of shopping balls. I won’t say much below, let’s take a look at the detailed introduction together.
CSS snippet
.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); /*Betzier Curve*/
}
.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 fragment
<div >
<ul class="shop">
<li v-for="item in items">
<span>{{}}</span>
<span>{{}}</span>
<button @click="additem">Add to</button>
</li>
</ul>
<div class="cart" style="">{{count}}</div>
<div class="ball-container"><!--Small ball-->
<div v-for="ball in balls">
<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
<div class="ball" v-show="">
<div class="inner inner-hook"></div>
</div>
</transition>
</div>
</div>
</div>
js snippet
<script>
new Vue({
el:"#app",
data:{
count: 0,
items:[
{
text: "apple",
price: 15
},
{
text: "banana",
price: 15
}
],
balls: [ //Small balls set to 3 {
show: false
},
{
show: false
},
{
show: false
},
],
dropBalls:[],
},
methods:{
additem(event){
();
++;
},
drop(el){ //Paste for(let i=0;i<;i++){
let ball= [i];
if(!){
= true;
=el;
(ball);
return;
}
}
},
beforeDrop(el) {/* Shopping cart ball animation implementation */
let count = ;
while (count--) {
let ball = [count];
if () {
let rect = (); //The position of the element relative to the viewport let x = - 32;
let y = -( - - 22); //Get y = '';
= 'translateY('+y+'px)'; //translateY
= 'translateY('+y+'px)';
let inner = ('inner-hook')[0];
= 'translateX('+x+'px)';
= 'translateX('+x+'px)';
}
}
},
dropping(el, done) { /*Reset the number of balls Style reset*/
let rf = ;
= 'translate3d(0,0,0)';
= 'translate3d(0,0,0)';
let inner = ('inner-hook')[0];
= 'translate3d(0,0,0)';
= 'translate3d(0,0,0)';
('transitionend', done);
},
afterDrop(el) { /*Initialize the ball*/
let ball = ();
if (ball) {
=false;
= 'none';
}
}
}
})
</script>
The transition attribute can be viewed in the official document, and the specific location can be obtained through debugging.
This is the end of this article about Vue's shopping ball parabola. For more related content on Vue's shopping ball parabola, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!