Shulou(Shulou.com)05/31 Report--

Most people don't understand the knowledge points of this article "how to make shopping cart ball animation effect in vue framework", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "how to make shopping cart ball animation effect in vue framework".

See the effect directly on the picture

Here's how to create this animation:

1. Because using vue lock requires wrapping with transition tags and specifying animation three animation lifecycle functions

//Ballflag is specified as false by default

The style is set to a red ball positioned absolutely to ensure that it does not affect other elements of the page

.ball{ width: 15px; height: 15px; border-radius: 50%; background-color: red; position: absolute; top: 413px; left: 80px; z-index: 99;}

Then set the button Ballflag = ! Ballflag takes the non-trigger animation effect (not much to say here)

If the starting position and the end position are fixed with px, then the effect of the device for different resolutions is different. To avoid this situation, I used dynamic calculation of the starting position and the end position. The following is the specific animation code

.ball{ width: 15px; height: 15px; border-radius: 50%; background-color: red; position: absolute; top: 413px; left: 80px; z-index: 99;}

Animate the effect by dynamically calculating the starting and ending positions (the advantage is to adapt to different resolution devices) and see that the entire animation effect now seems to be complete.

But I found a problem when I tested it

When I click the button to trigger the animation, I pull down the scroll bar and find that the animation ends not where I expected it to end up in the shopping cart because the absolute positioning I set for display when I styled the ball only calculates the absolute position in a page, and I can't follow the scroll bar. Then I thought that you could use fixed layout to move relative to the screen without being affected by page scrolling, so the code I implemented was like this

.ball{ width: 15px; height: 15px; border-radius: 50%; background-color: red; position: fixed; z-index: 99; top: 413px; left: 80px; }

**** Note that the boxPosition here is the position of the number 1 in the page, that is, the position of the positioning ball

beforeEnter(el){ var boxPosition = this.$ refs.boxPosition.getBoundingClientRect(); // console.log(boxPosition) //Get the starting position of the target var dist = boxPosition.y -413; el.style.transform = "translate(0,"+dist+"px)"; }, enter(el,done){ el.offsetWidth; var boxPosition = this.$ refs.boxPosition.getBoundingClientRect(); var badgePosition = document.getElementById("badge").getBoundingClientRect(); //Start position of target var dist = boxPosition.y -413; //Here, because the position of the box position is not the position of the ball, so-10 adjusts the error var xDist = badgePosition.left - boxPosition.left -10; //add the initial location here var yDist = badgePosition.top - boxPosition.top + dist; el.style.transform = "translate("+xDist+"px, "+yDist+"px)"; el.style.transition = "all 1s ease"; done(); }, afterEnter(el){ this.Ballflag = ! this.Ballflag; },

And that completes the animation of the ball.

This animation does not miss the exact location of the page due to scrolling and can be adapted to different resolution devices.

The above is the content of this article about "how to make shopping cart ball animation effect in vue framework". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will help everyone. If you want to know more relevant knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.