In computers, everything is a number. In Vue, everything that is a number can be animated in one way or other. In this recipe, you will control a bouncy ball that will smoothly position itself with a tween animation.
To complete this recipe, you will need at least some familiarity with JavaScript. The technicalities of JavaScript are out of the scope of this book, but I will break the code down for you in the How it works... section, so don't worry too much about it.
In our HTML, we will add only two elements: an input box in which we will enter the desired position of our bouncy ball and the ball itself:
<div id="app"> <input type="number"> <div class="ball"></div> </div>
To properly render the ball, write this CSS rule and it will appear on the screen:
.ball {
width: 3em;
height: 3em;
background-color: red;
border-radius: 50%;
position: absolute;
left: 10em;
}We want to...
