How to realize the Parabola of Shopping Ball by Vue
This article Xiaobian for you to introduce in detail "Vue how to achieve the shopping ball parabola", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue how to achieve the shopping ball parabola" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.
An example of the method of realizing Parabola of Shopping Ball in Vue
Html fragment
{{item.text}}
{{item.price}}
Add
{{count}}
Css fragment
.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); / * Bezier curve * /
}
.inner {
Width: 16px
Height: 16px
Border-radius: 50%
Background-color: rgb (0160220)
Transition: all 0.4s linear
}
.cart {
Position: fixed
Bottom: 22px
Left: 32px
Width: 30px
Height: 30px
Background-color: rgb (0160220)
Color: rgb (255255255)
}
Js fragment
New Vue ({
El: "# app"
Data: {
Count: 0
Items: [
{
Text: Apple
Price: 15
}
{
Text: banana
Price: 15
}
]
Balls: [/ / set the ball to 3
{
Show: false
}
{
Show: false
}
{
Show: false
}
]
DropBalls: []
}
Methods: {
Additem (event) {
This.drop (event.target)
This.count + +
}
Drop (el) {/ / Parabolic
For (let iTuno Bandi)
