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...