Animating the state of your components

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.

Getting ready

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.

How to do 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...